search

Giners / mui-places-autocomplete

Google Material Design (Material-UI) styled React component using Google Maps Places Autocomplete
MIT License
34 stars 26 forks source link

New: Allow the <input> element to be controlled (fixes #21) #22

Closed Giners closed 6 years ago

Giners commented 6 years ago

This PR implements new functionality to allow the <input> element to be controlled. This is useful when trying to integrate <MUIPlacesAutocomplete> with 3rd party libraries that need to control the <input> element such as Redux Form (https://redux-form.com/7.2.1/docs/api/field.md/#input-props).

To summarize a new prop named textFieldProps has been added for the <MUIPlacesAutocomplete> component. When rendering the <MUIPlacesAutocomplete> component, if we find the property named value on the object passed to the textFieldProps we consider the <input> element to be controlled. We then align the <Downshift> inputValue control prop with what was passed to us.

@kentcdodds & @donysukardi I'm reaching out to you as I would love feedback from you. I'm teaching myself full-stack development and this is my first open source project so any feedback/insights would be valuable to my learning.

I decided to reach out to you because I see that you are Downshift contributors and that you provided guidance on the following Downshift issue: https://github.com/paypal/downshift/issues/297. The changes in this PR to allow the <input> element to be controlled was based off of reviewing the Downshift docs as well as the guidance/examples you gave in the aforementioned issue. Really feedback on whether I'm leveraging the <Downshift> component correctly for this use case would be great.

I know you are busy and won't hold up the merge if you can't provide feedback right now (or just don't desire to) but if you do get time to provide feedback in the future I can make the changes retroactively in another PR. To preserve your time and not have you pour over this whole PR the interesting changes are in the src/MUIPlacesAutocomplete.jsx file. To see how I envision people of controlling the <input> element you can see the demo/example file demo/DemoControlledInput.jsx.

Giners commented 6 years ago

After discussing this PR with Matt some and reflecting on the approach I took to allow the <input> element to be controlled this PR seems to have been premature. Ill create a new PR in the future after taking a different approach to allow the <input> element to be controlled.