CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-ui
jsmiao
jsmiao

Reputation: 453

Problems accessing react event handler on renderedValue component using Material UI

I am trying to access the onDelete event handler in the chip component using Material UI in the follow code snippet.

When I click on the chip, the Select behavior (opening a dropdown) occurs.

Is there any way to override this behavior so I could also delete the chips?

Demo here on code sandbox: https://codesandbox.io/s/purple-thunder-s0isr

<Select
  labelId="demo-mutiple-chip-label"
  id="demo-mutiple-chip"
  key=""
  multiple
  value={["Fred", "Tom"]}]
  input={<Input id="select-multiple-chips" />}
  renderValue={() =>
    ["Fred", "Tom"].map((name) => (
      <Chip
        label={name}
        key={name}
        onDelete={() => {
          console.log("Delete clicked")
        }}
      />
    ))
  }
></Select>

Upvotes: 1

Views: 698

Answers (1)

Babak Yaghoobi
Babak Yaghoobi

Reputation: 1985

see sample :

import React, {useState} from "react";
import ReactDOM from "react-dom";
import { Select, Chip, Input, MenuItem } from "@material-ui/core";

import "./styles.css";

function App() {

  const [chipData, setChipData] = React.useState([
    { key: 0, label: 'A' },
    { key: 1, label: 'B' },
    { key: 2, label: 'C' },
    { key: 3, label: 'D' },
    { key: 4, label: 'E' }
  ]);  

  const [selectedChips, setSelectedChips] = React.useState([]);
  const [chipName, setChipName] = React.useState([]);
  const [canOpen, setCanOpen] = React.useState(false);

  const handleDelete = chipToDelete => () => {        
    let s = selectedChips.filter(chip => chip.key !== chipToDelete.key);
    setSelectedChips(s);
    setChipName(s);
  };

  const selectHandleOnOpen = event =>{    
    setCanOpen(!canOpen);    
  }

  const handleChange = event => {        
    setChipName(event.target.value);    
    setSelectedChips(event.target.value);
  };


  return (

    <Select
      style={{width: "300px"}}
      labelId="demo-mutiple-chip-label"
      id="demo-mutiple-chip"      
      multiple
      onChange={handleChange}
      value={chipName}      
      onClick={selectHandleOnOpen}      
      open={canOpen}
      renderValue={selected =>
        selectedChips.map(item => (          
          <Chip
            clickable={true}
            label={item.label}
            key={item.key}            
            onDelete={handleDelete(item)}
            style={{margin: "5px"}}  
          />

        ))
      }

    >
      {chipData.map(item => (
            <MenuItem key={'MenuItem-'+item.key} value={item} >
              {item.label}
            </MenuItem>
          ))}
      </Select>

  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

see sample output here: https://codesandbox.io/s/flamboyant-saha-felni

Upvotes: 3

Related Questions