We are using react-number-format (###)-###-####' for phone number formatting and Autocomplete component from #material-ui. So, how to integrate react-number-format within a Autocomplete component so that when the user searches for the phone number for eg. '1234567899' it gets auto converted to this format '(123)-456-7899'.
Have implemented the code as below. Any suggestions would be highly appreciated.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
classes={{
option: classes.option
}}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
<NumberFormat formate = '(###)-###-####' mask="_" prefix={'01'} />;
Related
I'm using the React MUI Autocomplete component like in the countries example from the official doc.
My goal is to display in bold the country code, as I already did in the renderOption by simply enclosing the option.code value with HTML tags.
import * as React from 'react';
import Box from '#mui/material/Box';
import TextField from '#mui/material/TextField';
import Autocomplete from '#mui/material/Autocomplete';
export default function CountrySelect() {
return (
<Autocomplete
id="country-select-demo"
sx={{ width: 300 }}
options={countries}
autoHighlight
getOptionLabel={(option) => `${option.code} ${option.label}`} // DISPLAY THE CODE
renderOption={(props, option) => (
<Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
<img
loading="lazy"
width="20"
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
alt=""
/>
{option.label} (<b>{option.code}</b>) +{option.phone}
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
/>
)}
/>
);
}
I cannot find a way to reference the option.code inside the renderInput property, so I cannot figure out how to display the country code in bold also in the renderInput, since the bold is only visible when choosing an option, but not when that option is selected.
Is there a solution for this?
The main problem with this is that MUI Textfields consist of HTML <input/> tags.
Its value can only be of type string which prohibits any direct value styling but you can make use of an startAdornment like so:
...
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputProps={{
...params.InputProps,
startAdornment: <strong>{params.inputProps.value.split(" ")[0]}</strong>
}}
/>
)}
...
Your next challenge would be to remove the additional country code from the input-value or even better, move to a controlled value approach.
I am using AutoComplete API of material UI. there is an object of top100Films which contains the title and year of movies. My autocomplete works fine if i search with top100Film.title as shown in code
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title} // <--
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
But if i want to search the movies with top100Films.year then i get an error message
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.year}//<--
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
candidate.toLowerCase is not a function. (In 'candidate.toLowerCase()', 'candidate.toLowerCase' is undefined)
How can i use any other data field except .title
the code is in Link
getOptionLabel should return string while top100Films.year returns a number. change the getOptionLabel as below and it'll work fine:
getOptionLabel={(option) => option.year.toString()}
sandbox
need cast year in to string codesandbox
I am using material ui in reactjs.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => {
console.log(option)
return option.title
}
}
style={{ width: "100%" }}
onInputChange ={(event) => testMethod(event)}
renderInput={(params) => <TextField {...params} label="Search here" variant="outlined" />}
/>
I have Following Issues:
How to get the searched input value
To show dropdown only after typing search text
Filter options based on search input
The params object dosen't seem to be working with InputBase. I also tried ref={params.inputProps}. Im using the googleplaces autocomplete
<Autocomplete
id="combo-box-demo"
options={autocomplete}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} />} // InputBase instead of TextField
/>
You just have to spread out the params. The params includes InputLabelProps and InputProps, so you have to separate those out from the rest, and spread the InputProps back in.
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => {
const {InputLabelProps,InputProps,...rest} = params;
return <InputBase {...params.InputProps} {...rest} />}}
/>
Working demo: https://codesandbox.io/s/material-demo-forked-6yhsk?file=/demo.tsx
I have been using material-ui's autocomplete in freeSolo mode. I would like to show a loading text while options are being loaded. It isn't working as expected currently. But loading text is shown when freeSolo is disabled. The same behaviour is seen for no-options text also. Is it possible to show loading and no options text in freeSolo mode?
Ref: https://codesandbox.io/s/material-demo-mqtk8
In the above example, if freeSolo is set as false, loading text and no options text is shown as expected.
Using this prop loadingText can you set your own loading text.
You can see this MaterialUi documentation, here is the link Material UI AutoComlete API
<Autocomplete
freeSolo
id="asynchronous-demo"
style={{ width: 300 }}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
getOptionSelected={(option, value) => option.name === value.name}
getOptionLabel={(option) => option.name}
options={options}
loading={loading}
loadingText="Your loading text here"
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
fullWidth
variant="outlined"
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
)
}}
/>
)}
/>