javascript - Disable backspace deleting of options in Autocomplete - Stack Overflow

admin管理员组

文章数量:1405117

I want to use an Autoplete (from the Material UI library) ponent from material ui to select multiple options, and those options should not be able to be removed (directly) by the user.

The problem I'm facing is that the user can delete the options from the Autoplete if they focus the ponent and press backspace as if they are deleting text.

Code

This is the ponent I'm using:

<Autoplete multiple
    options={options}
    getOptionLabel={option => option.title}
    renderInput={params =>
        <TextField {...params} label="Autoplete" variant="outlined" />
    }
    onChange={this.onAutopleteChange.bind(this)}
    getOptionSelected={(option: Option, value: Option) => option.value === value.value}
    filterSelectedOptions={true}
    renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
            <Chip key={option.value} label={option.title} color="primary" />
        ))
    }
    disableClearable={true}
/>

What I tried

• Disabling the TextField from the renderInput prop with disable={true} has no effect.
• Adding InputProps={{ disabled: true }} or InputProps={{ readOnly: true }} to TextField disables the Autoplete pletely.
• Adding ChipProps={{ disabled: true }} to the Autoplete has no effect.

Thanks for reading!

I want to use an Autoplete (from the Material UI library) ponent from material ui to select multiple options, and those options should not be able to be removed (directly) by the user.

The problem I'm facing is that the user can delete the options from the Autoplete if they focus the ponent and press backspace as if they are deleting text.

Code

This is the ponent I'm using:

<Autoplete multiple
    options={options}
    getOptionLabel={option => option.title}
    renderInput={params =>
        <TextField {...params} label="Autoplete" variant="outlined" />
    }
    onChange={this.onAutopleteChange.bind(this)}
    getOptionSelected={(option: Option, value: Option) => option.value === value.value}
    filterSelectedOptions={true}
    renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
            <Chip key={option.value} label={option.title} color="primary" />
        ))
    }
    disableClearable={true}
/>

What I tried

• Disabling the TextField from the renderInput prop with disable={true} has no effect.
• Adding InputProps={{ disabled: true }} or InputProps={{ readOnly: true }} to TextField disables the Autoplete pletely.
• Adding ChipProps={{ disabled: true }} to the Autoplete has no effect.

Thanks for reading!

• javascript
• reactjs
• material-ui
• mui-autoplete

Share Improve this question Follow edited Apr 4 at 13:17 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Aug 4, 2020 at 17:10 LeonMarchettiLeonMarchetti 10533 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

To control this aspect, you need to use a controlled approach to the Autoplete's value as demonstrated in this demo.

In the documentation for the onChange prop you will find the following:

onChange    Callback fired when the value changes.

Signature:

function(event: object, value: T | T[], reason: string) => void

   event: The event source of the callback.
   value: The new value of the ponent.
   reason: One of "create-option", "select-option", "remove-option", "blur" or "clear".

The third argument to onChange is the "reason" for the change. In your case, you want to ignore all of the "remove-option" changes:

        onChange={(event, newValue, reason) => {
          if (reason !== "remove-option") {
            setValue(newValue);
          }
        }}

Here's a full working example:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autoplete from "@material-ui/lab/Autoplete";
import Chip from "@material-ui/core/Chip";

const options = ["Option 1", "Option 2"];

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

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : "null"}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autoplete
        multiple
        value={value}
        disableClearable
        onChange={(event, newValue, reason) => {
          if (reason !== "remove-option") {
            setValue(newValue);
          }
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
        renderTags={(tagValue, getTagProps) =>
          tagValue.map((option, index) => (
            <Chip key={option} label={option} color="primary" />
          ))
        }
      />
    </div>
  );
}

本文标签： javascriptDisable backspace deleting of options in AutocompleteStack Overflow