olahol / react-tagsinput

Highly customizable React component for inputing tags.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.