I would like to use the autocomplete from downshift in my antd-mobile web-app. I like downshift as it renders external components.
Unfortunately I could not figure out, how to 'bind' one of the one / two text input elements from antd-mobile. The components offer a 'controlled' mode, but I couldn't find the respective docs.
Just passing on the getInputProps() from downshift doesn't work:
<InputItem {...downshift.getInputProps()} />
downshift throws:
Uncaught TypeError: Cannot read property 'value' of undefined
This happens when downshift reads event.target.value on the only callback argument provided (event) by the antd-mobile component (calling-back onChange()). This makes sense as the antd-mobile api-doc says that a 'string' type value of the text input is returned.
So, how do I get the original react <input> component onChange callback from the antd-mobile component to pass it on?
Looking into the source: I lost track here. The onChange callback should be set to this.props.onChange (included in restProps). Which in turn should be set by getInputProps() from downshift: Object.keys of return value are:
["aria-autocomplete", "aria-activedescendant", "aria-controls", "aria-labelledby", "autoComplete", "value", "id", "onChange", "onKeyDown", "onBlur"]
And looking into the future: Given the onChange callback gets through to downshift - will there be more binding necessary?
