0

I tried below code, I want to clear my allow free form user input text and
I find github PR in fluent ui github page for this issue i don't know how to use this: https://github.com/microsoft/fluentui/pull/5787

import { ComboBox } from "@fluentui/react";
import React from "react";
import { useController } from "react-hook-form";
import { mapDropdownData } from "../../../hooks/utils/utility";


const ControlComboBox = ({ name, control, lookupById, onChange, ...props }) => {
  const { field, formState, } = useController({ name, control });

  const onPendingValueChanged = (_option, _index, value) => {
    // allowfreeform user typed manual value
    if(value!==undefined){
      field.onChange(mapDropdownData(value));
    }
  }

  const onComboBoxChanged = (_event, option,_value) => {
    // Dropdown value changed
    const lookup = lookupById(option.key);
    field.onChange(lookup);
    if (onChange) {
      onChange(option,lookup);
    }
  }

  return (
    <ComboBox
      key={name}
      componentRef={field.ref}
      allowFreeform={true}
      autoComplete="off"
      persistMenu={true}
      useComboBoxAsMenuWidth={true}
      onPendingValueChanged={onPendingValueChanged}
      selectedKey={field.value?.id}
      errorMessage={formState.errors[name]?.id?.message}
      onChange={onComboBoxChanged}
      {...props}
    />
  );
};

export default ControlComboBox;
Mohamed
  • 13
  • 3

0 Answers0