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.
Here is a little context if you do decide to review at some point... <MUIPlacesAutocomplete> allows users to search for places using the Google Maps service. It leverages <Downshift> to provide autocomplete functionality and facilitate dropdown/select functionality with help from Material-UI/Popper.
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 namedvalue
on the object passed to thetextFieldProps
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 filedemo/DemoControlledInput.jsx
.Here is a little context if you do decide to review at some point...
<MUIPlacesAutocomplete>
allows users to search for places using the Google Maps service. It leverages<Downshift>
to provide autocomplete functionality and facilitate dropdown/select functionality with help from Material-UI/Popper.