[Bug]: Fluent UI ComboBox allowFreeform clear the user input text

[mohamed-isak]

Library

React Northstar / v0 (@fluentui/react-northstar)

System Info

npm i

Are you reporting Accessibility issue?

no

Reproduction

ok

Bug Description

Actual Behavior

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;

Expected Behavior

I want to clear user input in allow free form in combobox

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[smhigley]

@mohamed-isak to be able to clear the Combobox value, you would need to fully control the value through the text prop, and update it when the user selects a new value, or when you want to clear the input based on outside logic.

Here's a codepen demonstrating how to control the Combobox value/text: https://codepen.io/smhigley/pen/NWONNea/e1e0b7f35e4abb5f687aeb9d93789c4b?editors=1010

Let me know if that answers your question!

[smhigley]

Just as a side note -- you almost certainly also want to clear the selectedKey if you also clear the display value. You could alternately just clear the selectedKey and not control text if you follow the "Controlled Combobox" pattern on our docs page: https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox

[mohamed-isak]

when you want to clear the input based on outside logic.

this is my exact question i want to clear the user typed input on this. your above codepen example only clear the selected dropdown value. user typed value not clearing