How to auto select item from Fluent UI Dropdown

13 views Asked by At

i am trying to make fluent UI dropdown component i want i have one button when i click on it so my any one item automatic select from dropdown and show in the dropdown input. automatic populate option let suppose now i when click on button i have set selected item "ASIFMA Committees" need to show in dropdown input and also show in in list as selected here is my code

import * as React from "react";
import { Button, Dropdown, makeStyles, Option, shorthands, useId } from "@fluentui/react-components";

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
    maxWidth: "400px",
  },
});

const CustomDropdown = () => {
  const dropdownId = useId("dropdown-default");
  const options = [
    {
      Name: "Advisory Councils",
      CommitteeCode: null,
      DivisionCode: "LEGCOMPLL",
    },
    {
      Name: "ASIFMA Committees",
      CommitteeCode: null,
      DivisionCode: "CAPMARK",
    },
    // Add the rest of your API response here
  ];

  const styles = useStyles();
  const [selectedItems, setSelectedItems] = React.useState([]);
  const [selectedText, setSelectedText] = React.useState("ASIFMA Committees");

  const handleOptionSelect = (event, data) => {
    const selectedOption = data.optionValue;
    const selectedOptionText = options.find((option) => option.DivisionCode === selectedOption)?.Name || "";
    setSelectedText(selectedOptionText);

    if (selectedItems.includes(selectedOption)) {
      setSelectedItems(selectedItems.filter((item) => item !== selectedOption));
    } else {
      setSelectedItems([...selectedItems, selectedOption]);
    }
  };

  const setItem = () => {
    const asifmaOption = options.find((option) => option.Name === "Advisory Councils");
    if (asifmaOption) {
      setSelectedText(asifmaOption.Name); // Update the selected text
      handleOptionSelect(null, {
        optionValue: asifmaOption.DivisionCode,
        optionText: asifmaOption.Name,
        selectedOptions: [asifmaOption.DivisionCode],
      });
    }
  };

  return (
    <div className={styles.root}>
      <label id={dropdownId}>Select an option</label>
      <Dropdown
        aria-labelledby={dropdownId}
        placeholder="Select an option"
        onOptionSelect={handleOptionSelect}
        selectedOptions={selectedItems}
        defaultValue={selectedText}
        defaultSelectedOptions={[selectedText]}
        // text={selectedText} // Pass selectedText to the Dropdown component
      >
        {options.map((option, index) => (
          <Option key={index} value={option.DivisionCode}>
            {option.Name}
          </Option>
        ))}
      </Dropdown>
      <Button onClick={setItem}>Set Auto</Button>
    </div>
  );
};

export default CustomDropdown;

``` here is my code if anyone can help me


i want when i click on button automatic select item in dropdown.
0

There are 0 answers