How to show confirmation modal before clearing all tags?

[jagodakubicka]

I have tried adding customized component for ClearIndicator but either none click events worked, or it had it's default behaviour of isClearable (without showing modal)
Is there an easy way to code it :( ? here is an example

[manjushsh]

Hi @jagodakubicka, After some tries, I was able to find out way to achieve this.

Checkout 👉🏼 this code sandbox for working solution

Here we are disabling clear event and manually calling that event once use clicks ok on popup/modal.
I am not sure if it is a good practice or not.

Flow:

1. Extract clearValue from rest props function ClearIndicator({ clearValue, ...props }) and onMouseDown, onTouchEnd from props.innerProps
2. Create a onClear function with const onClear = (e) => clearValue(e);
3. Call it on modal button click

[jagodakubicka]

This is just what I needed, thank you so much!

[manjushsh]

For people referring to this in future. Code sandbox stopped working.
Here is the code:

import { useState } from "react";
import Button from "react-bootstrap/Button";
import Select from "react-select";
import BasicModal from "./components/Modal";
import BadgeList from "./components/Badge";
import { colourOptions } from "./other-stuff";

export default function ConfirmBeforeClear() {
  const [show, setShow] = useState(false);
  const [selections, setSelections] = useState(null);
  const handleShow = () => setShow(true);
  const onClearAll = () => {
    setSelections(null);
    setShow(false);
  };

  const ClearIndicator = (props) => {
    const {
      innerProps: { onMouseDown, onTouchEnd, ...restInnerProps },
    } = props;
    return (
      <div {...restInnerProps}>
        <Button size="sm" variant="danger" onClick={handleShow}>
          Clear All
        </Button>
      </div>
    );
  };

  return (
    <>
      <div>
        <h1 className="my-3">Confirm before clear</h1>
        {/* Custom styling */}
        <Select
          isMulti
          isClearable
          className="px-3"
          options={colourOptions}
          components={{
            ClearIndicator,
          }}
          value={selections}
          onChange={(v) => setSelections(v)}
        />
      </div>

      <BasicModal show={show} setShow={setShow} primaryAction={onClearAll} />

      {selections?.length ? (
        <div className="mx-3 my-2">
          <h4>Your selections:</h4>
          <BadgeList badges={selections.map((s) => s.label)} />
        </div>
      ) : (
        ""
      )}
    </>
  );
}