No way to create tags on mobile

[ibrahimfarooq17]

The component doesn't allow any way to create tags using a mobile browser. I tried adding different separators as well, still doesn't work. Tested on Chrome.

[mo7medhasan]

to create tags on mobile

you must add button

codesandbox

export default function App() {
  const [selected, setSelected] = useState(["papaya"]);
  const handleButtonClick = () => {
    const InputElement = document.querySelector(`#id .rti--input`);
    if (InputElement) {
      const value = InputElement.value;
      if (!selected.includes(value) && value !== "") {
        setSelected([...selected, value]);
        InputElement.value = "";
      }
    }
  };
  return (
    <div>
      <h1>Add Fruits</h1>

      <pre>{JSON.stringify(selected)}</pre>
      <div id={"id"}>
        <TagsInput value={selected} onChange={setSelected} />

        <button
          type="button"
          onClick={handleButtonClick}
          className="px-6 py-2 text-white bg-primary rounded-md"
        >
          add tage
        </button>
      </div>

    </div>
  );
}

[ComradePashka]

seems you also can simply add same logic to onBlur handler:

            onBlur={(e) => {
                const InputElement = document.querySelector(`[name=${name}]`);
                if (InputElement) {
                    const newValue = InputElement.value;
                    if (!value.includes(newValue) && newValue !== "") {
                        setValue([...value, newValue]);
                        InputElement.value = "";
                    }
                }
            }}

in this case you must pass name to TagInput, but then you don't need extra div-wrapper around TagInput and can simplify selector to find element by name attribute. this is working in Chrome dev-console with device mode toggled, not yet tested on real mobiles.