preventSubmit=false and AutoSuggest example code conflict
mykter opened this issue · comments
If preventSubmit=false
but AutoSuggest's onChange function is per the provided example:
const handleOnChange = (e, {newValue, method}) => {
if (method === 'enter') {
e.preventDefault()
} else {
props.onChange(e)
}
}
then pressing enter works to select a partially entered tag, but pressing again to submit the form doesn't work - the preventDefault stops it.
I've added a test that there is some input prior to calling preventDefault, which works for me though there might be a better approach.
let inputValue = "";
if (renderInputProps.value) {
inputValue = renderInputProps.value.trim().toLowerCase();
}
const inputLength = inputValue.length;
...
const handleOnChange = (e, {newValue, method}) => {
if (method === "enter" && inputLength > 0) {
// preventDefault to stop the currently entered text being used as a tag
// but _don't_ preventDefault if there's no options available - otherwise this
// will stop form submission
...
Is there a way to set this up so preventSubmit and AutoSuggest play nicely with each other with a less convoluted setup?
Even if not, I think it would be useful to add a note in the docs or examples outlining how to deal with this.