Material-ui: [Autocomplete] Automatic tokenization with delimiter

[hsleiman-1]

I am currently working with the freesolo Autocomplete and my particular use case requires tags to be created when commas or spaces follow the input text. Autocomplete currently creates tags on the Enter event, but I don't think there is anything built into Autocomplete yet that supports tag creation on any other event. I'm wondering if I'm missing anything, or if I'm not, how could I approach this problem?

Currently, I'm attempting to use the onInputChange attribute in Autocomplete to capture the string coming in. I check that string for commas and spaces, and on a successful find of one of those characters I manually fire off the Enter event using some native JS code. This works in some cases, but not in all cases and accounting for all cases is becoming tedious. This approach seems like it's prone to a lot of issues, and I'm not convinced it's the best way to go about implementing tag creation on different events. Looking for some thoughts. Thanks

[oliviertassinari]

my particular use case requires tags to be created when commas or spaces follow the input text.

@budrunner I have seen this feature implemented by a small number of alternative solutions when benchmarking. I have personally implemented it in the past, for a different project.
It's still not clear if we should support it outside of the box.

As a workaround, you should be able to rely on value/onChange (to add the values) and inputValue/onInnputChange (to detect the usage of delimiters) props.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such "Automatic tokenization with delimiter". So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[picosam]

As a workaround, you should be able to rely on value/onChange (to add the values) and inputValue/onInnputChange (to detect the usage of delimiters) props.

Hello @oliviertassinari, may you please provide an example? I can't get it to work this way...

[oliviertassinari]

@picosam 6 upvotes, sounds fair:

/* eslint-disable no-use-before-define */
import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

export default function Tags() {
  const [value, setValue] = React.useState([]);
  const [inputValue, setInputValue] = React.useState("");

  return (
    <Autocomplete
      multiple
      freeSolo
      id="tags-standard"
      options={["Option 1"]}
      value={value}
      inputValue={inputValue}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      onInputChange={(event, newInputValue) => {
        const options = newInputValue.split(",");

        if (options.length > 1) {
          setValue(
            value
              .concat(options)
              .map(x => x.trim())
              .filter(x => x)
          );
        } else {
          setInputValue(newInputValue);
        }
      }}
      renderInput={params => (
        <TextField
          {...params}
          label="Automatic tokenization"
          placeholder="Use , as a delimiter"
        />
      )}
    />
  );
}

https://codesandbox.io/s/material-demo-xb3zm?file=/demo.js:0-1108

[picosam]

Hi @oliviertassinari! Again, thanks for your help. Your method is working well, except I'm unable to capture the value when the user types then clicks tab to move to the next field or to the submit button. I created the following sandbox for you to see what I mean: https://codesandbox.io/s/wild-sea-h2i0m

[sukiasyan]

@oliviertassinari thanks, but I guess this method will not work when you use InputProps for Textfield

[oliviertassinari]

@sukiasyan It works. If you customize something, you need to make sure you extend the behavior, not override it.