Hello again!

Some days ago I identified a feature that I needed for my project, and thought I could make it a merge request for it. I don't know if you get notifications for merge requests, so I am writing an issue too :)

As it is, the component does not have anything to indicate to the user that the field is a field, more than the search icon and the placeholder. So I needed the MUI v4 search field design back (with the underline). And maybe other people would like their input to have a border, like when using the "outlined" variant.

The idea of my implementation is to let the user chose whether they want to use an <InputBase /> or a <TextField />.

The changes I made do not break the component, apart from the removal of the disableUnderline property (which was not used anywhere in the code). Indeed, by default the <InputBase /> is used, and does not have any border or underline. Maybe this removal is not a great thing, I'll let you decide 😄

For my use case (in my project), I just have to rename inputProps into textFieldProps, and add "variant: standard" to get the MUI v4 design back.

If you want me to explain more, or want to talk about this feature, feel free :)
#55

Is it possible to set default value into textfield?

nice component :) building the typescript is proving tricky as the classes inputProp to the Autosuggest tag provokes a No overload matches this call. error, any tips?

Hi there, thanks for the library.

I spent one hour on a UI-UX bug and I couldn't make it work. In mobile view, the space between the textflield and the cross is too large. This is due to padding inside the component and I couldn't set them to 0 with the properties I can access.

Here is a picture, a bug part of the address is truncated because of this space.

Can you make this space a parameter? Thanks !

Input loses value and autosuggest doesn't work, when I add endAdornment.
My inputTextFieldProps:

inputTextFieldProps={{
variant: 'outlined',
classes: {
root: classes.textField
},
label: "Z",
InputProps: {
endAdornment: <InputAdornment position="end">
<SearchIcon color="action" />
</InputAdornment>
}
}}

I think InputProps are overwritten and loses ref.
Can anyone help how add endAdornment?

Hello, could you please upgrade the dependency of the main package to react v17? I made a pull request with the changes, tested in the demo project, and saw no problem. Thank you!

#52

Hi, I created a merge request last week about a new property and better comments. I don't know if you receive merge request notifications, so here's an issue to say that it's opened and that I'd like you to review it :) #63

Thanks!

Is it possible to add ref to this component? It returns error below:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Hey there, thanks for the awesome library!

I'm using material-ui's outlined inputs across my app. Is there a way to specify the type of input I want to use? Or better yet, use my existing (nonfunctioning) styled input with your library?

Any thoughts on how to fix this? Thanks!

Hi there, me again.

Apologies for my ignorance... I'm having a bit of trouble figuring out how to target the fieldset inside of the input style. For me, it has a "NotchedOutline" class.

More specifically, I need to alter the blue border when the input has focus.

My code is as follows:
const Geocoder = withStyles({
container: {
backgroundColor: 'inherit',
marginTop: '16px',
},
})(MatGeocoder);

const styles = {
input: {
'&$cssFocused $notchedOutline': {
backgroundColor: 'green'
}
},
textField: {
// backgroundColor: 'blue',
}
};

<Geocoder
inputPlaceholder='City, State'
accessToken={MAPBOX_TOKEN}
onSelect={result => this._handleChange}
showLoader={true}
inputPaperProps={{ square: true }}
suggestionsPaperProps={{
square: true,
}}
inputTextFieldProps={{
variant: 'outlined',
fullWidth: true,
classes: {
root: classes.textField
}
}}
inputClasses={{
root: classes.input
}}
showInputContainer={false}
{...geocoderOptions}
>
</Geocoder>

Thanks for your help!

Hello,

Nice library by the way :)

I wonder if I can set the geocoder in a different place other than the map.
I want to place it for example in a form beside the map.

Line 65:3: '_goToGeocoderResult' is not defined no-undef

Hello, could you please upgrade the dependency of the main package to react v17? I made a pull request with the changes, tested in the demo project, and saw no problem. Thank you!

#52