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;