Semantic UI React Uncontrolled Dropdown Clear

Question

I am currently working with Semantic UI React's "Dropdown" component. I need this component to be uncontrolled (ie no "value" prop). I have a form with hundreds of inputs, and when it becomes controlled, I am running into major performance issues.

The issue I am running into, is I need to be able to "clear" the Dropdown component to null. Is there a way to do this with a "ref" for a Semantic UI Dropdown? For instance, on a button click, I need to clear the dropdown - but I don't want a controlled dropdown.

import React, { createRef } from "react";
import { Dropdown, Ref, Button } from "semantic-ui-react";

const friendOptions = [
  {
    key: "Jenny Hess",
    text: "Jenny Hess",
    value: "Jenny Hess",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/jenny.jpg"
    }
  },
  {
    key: "Elliot Fu",
    text: "Elliot Fu",
    value: "Elliot Fu",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/elliot.jpg"
    }
  },
  {
    key: "Stevie Feliciano",
    text: "Stevie Feliciano",
    value: "Stevie Feliciano",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/stevie.jpg"
    }
  },
  {
    key: "Christian",
    text: "Christian",
    value: "Christian",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/christian.jpg"
    }
  },
  {
    key: "Matt",
    text: "Matt",
    value: "Matt",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/matt.jpg"
    }
  },
  {
    key: "Justen Kitsune",
    text: "Justen Kitsune",
    value: "Justen Kitsune",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/justen.jpg"
    }
  }
];

const DropdownExampleSelection = () => {
  var dropdownItem = createRef();

  const handleClick = e => {
    var element = dropdownItem.current.querySelector('[aria-selected="true"]');
    if (element) {
      element.setAttribute("aria-selected", "false");
      element.setAttribute("class", "item");
      // console.log(element.querySelector(".text").innerHTML());
      console.log(element.querySelector(".text"));
      // element.querySelector(".text").innerHTML = "";
      // console.log(dropdownItem.current.querySelector(".text"));
      dropdownItem.current.querySelector(".text").innerHTML = '';
    }

    // dropdownItem.current.lastChild.firstChild.focus();
  };

  return (
    <>
      <Ref innerRef={dropdownItem}>
        <Dropdown
          placeholder="Select Friend"
          fluid
          selection
          options={friendOptions}
          clearable
        />
      </Ref>
      <Button onClick={handleClick}>Reset</Button>
    </>
  );
};

export default DropdownExampleSelection;

Answer 1

The closest I got to this was clicking the "close" button via the ref:

import React, { createRef } from "react";
import { Dropdown, Ref, Button } from "semantic-ui-react";

const friendOptions = [
  {
    key: "Jenny Hess",
    text: "Jenny Hess",
    value: "Jenny Hess",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/jenny.jpg"
    }
  },
  {
    key: "Elliot Fu",
    text: "Elliot Fu",
    value: "Elliot Fu",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/elliot.jpg"
    }
  },
  {
    key: "Stevie Feliciano",
    text: "Stevie Feliciano",
    value: "Stevie Feliciano",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/stevie.jpg"
    }
  },
  {
    key: "Christian",
    text: "Christian",
    value: "Christian",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/christian.jpg"
    }
  },
  {
    key: "Matt",
    text: "Matt",
    value: "Matt",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/matt.jpg"
    }
  },
  {
    key: "Justen Kitsune",
    text: "Justen Kitsune",
    value: "Justen Kitsune",
    image: {
      avatar: true,
      src: "https://react.semantic-ui.com/images/avatar/small/justen.jpg"
    }
  }
];

const DropdownExampleSelection = () => {
  var dropdownItem = createRef();

  const handleClick = e => {
    var element = dropdownItem.current.querySelector('[aria-selected="true"]');
    if (element) {
      dropdownItem.current.querySelector(".clear").click();
    }

    // dropdownItem.current.lastChild.firstChild.focus();
  };

  return (
    <>
      <Ref innerRef={dropdownItem}>
        <Dropdown
          placeholder="Select Friend"
          fluid
          selection
          options={friendOptions}
          clearable
          loading
        />
      </Ref>
      <Button onClick={handleClick}>Reset</Button>
    </>
  );
};

export default DropdownExampleSelection;