CODEWITHSUNDEEP
javascriptreactjstypeahead.jsbootstrap-typeahead
Umbro
Umbro

Reputation: 2204

How remove an item from the Typeahead React multiselect?

In the TokenSkill component, it addsonRemove = {props.onRemove}. However, with an element in multiselect, there is no cross to delete the selected element.

Demo here: https://codesandbox.io/s/74n5rvr75x

import React from "react";
import { render } from "react-dom";
import { Token, tokenContainer, Typeahead } from "react-bootstrap-typeahead";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const TokenSkill = tokenContainer(props => {
  return (
    <div
      {...props}
      onClick={event => {
        event.stopPropagation();
        props.onClickCustom(event);
      }}
      onRemove={props.onRemove}
      className="tokenSkill"
      tabIndex={0}>
      {props.children}
    </div>
  );
});

class App extends React.Component {
  render = () => {
    const options = [
      { id: "house", name: "House" },
      { id: "house2", name: "House2" },
      { id: "house3", name: "House3" }
    ];

    return (
      <Typeahead
        clearButton
        labelKey="name"
        multiple
        allowNew
        onChange={console.log("toot!")}
        options={options}
        placeholder="Choose a state..."
        renderToken={(...args) => this.getSkillEffectToken(...args)}
      />
    );
  };

  getSkillEffectToken = (option, onRemove, index) => {
    return (
      <TokenSkill
        onRemove
        key={index}
        onClickCustom={event => {
          alert("bad! The window still shows");
        }}
      >
        {`${option.name}`}
      </TokenSkill>
    );
  };
}

Upvotes: 0

Views: 1994

Answers (1)

Kannan G
Kannan G

Reputation: 1004

Code updated and refer this working clone of your source - https://codesandbox.io/s/lively-cherry-7kpui

It seems you have some CSS issue on alignment for global clear all data(X), adding to that you are not passing data properly for the tabIndex and onClick data to TokenSkill method, your code is updated please validate and provide feedback

import React from "react";
import { render } from "react-dom";
import { Token, tokenContainer, Typeahead } from "react-bootstrap-typeahead";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const TokenSkill = tokenContainer(props => {
  console.log("2", props);
  return (
    <div
      {...props}
      onClick={event => {
        event.stopPropagation();
        props.onClickCustom(event);
      }}
      tabIndex={props.key}
      className={"tokenSkill"}
    >
      {props.children}
      <button aria-label="Clear" class="close rbt-close" type="button">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Clear</span>
      </button>
    </div>
  );
});

class App extends React.Component {
  render = () => {
    const options = [
      { id: "house", name: "House" },
      { id: "house2", name: "House2" },
      { id: "house3", name: "House3" }
    ];

    return (
      <Typeahead
        clearButton
        labelKey="name"
        multiple
        onChange={console.log("toot!")}
        options={options}
        placeholder="Choose a state..."
        renderToken={(...args) => this.getSkillEffectToken(...args)}
      />
    );
  };

  getSkillEffectToken = (option, onRemove, index) => {
    console.log(onRemove);
    return (
      <TokenSkill
        key={index}
        onClickCustom={evt => {
          onRemove(evt);
          // alert("bad! The window still shows");
        }}
      >
        {`${option.name}`}
      </TokenSkill>
    );
  };
}

render(<App />, document.getElementById("root"));

Upvotes: 1

Related Questions