Dropdown - showClear option not working with reactHookForm

[ivanbrizuela]

Describe the bug

Using Dropdown component and setting a defaultValue to initialize the hookform.useForm hook, when clicking the clear button (showClear option enabled) the component value is cleared but it continues to display the defaultValue label, instead of the placeholder text. Therefore, the end user can't tell if the value was cleared or not.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-snd6xu?file=/src/demo.js

PrimeReact version

9.2.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

• Load the Dropdown with a non-empty defaultValue (e.g. New York)
  • This would be the use case of loading existent data to update it.
• Clear the value clicking on the clear icon

Expected behavior

Value is cleared and the placeholder text (Select a City) is displayed.

Actual behavior:

• The default value label is displayed, hinting that there is still a selected value.
• But data seems to be cleared to hookForm: submitting the form shows data is cleared.
  • If the original value is selected again using the dropdown, it seems to never get set to hookForm.
  • Re selecting and re-submitting the defaultValue keeps displaying the default value label, but no data is sent.
    • Selecting a different value (e.g. Rome) and then the default value again (New York) makes it work again.
    • Maybe an onChange is not triggered?

[melloware]

Does the same behavior occur outside of React Hook Form?

[ivanbrizuela]

Does the same behavior occur outside of React Hook Form?

No, it does not seem to happen if React Hook Form is not involved (e.g. using state only):

https://codesandbox.io/s/primereact-demo-forked-2ijj5u?file=/src/demo.js

[melloware]

OK cool just wanted to clarify! Thank you for the reproducer.

[omarsaade]

@melloware @ivanbrizuela It seems that showClear button is resetting the form field's value even though it is supposed to clear it.

I made a quick solution by removing the defaultValues and making the dropdown default to NY using a useEffect hook on render.

Here's my approach: https://codesandbox.io/s/primereact-demo-forked-76kh1d

Is this fix enough or should we fix it by changing the package's code?

[melloware]

I agree with @omarsaade React Hook Form is doing the right thing. It sees a blank value and resets it to defaultValues.

[ivanbrizuela]

I agree with @omarsaade React Hook Form is doing the right thing. It sees a blank value and resets it to defaultValues.

@melloware, I don't think this what the hook is doing:

If a blank value is a valid input, and defaultValue is a non-blank value, always resetting blank values to defaultValue would make it impossible to select the blank value (which, as said, is a valid input).

If you see the reproducer fork: https://codesandbox.io/s/primereact-demo-forked-snd6xu?file=/src/demo.js

• Load the form with a default non-blank value (New York)
• Clear the value clicking on the "x"
• The defaultValue label "New York" is still displayed
• But if you submit the form, the blank value is correctly processed by the hook

A default non-blank value can be cleared and submitted through the hook. React Hook Form is (correctly) not resetting the form with the defaultValue.

The problem is that the Dropdown, after the value is cleared, incorrectly displays the label of the defaultValue, which is not what the underlying form and React Hook Form will finally use on submission.

I hope this helps clarify the problem, which I think still exists.

[ivanbrizuela]

I made a quick solution by removing the defaultValues and making the dropdown default to NY using a useEffect hook on render.

@omarsaade as per my comment above, I don't think React Hook Form resetting the field's value: It accepts a blank value without a problem on submission. The glitch seems on what Dropdown component displays.

Not using defaultValues in your example seems to be a valid workaround, but I can't get it to work on my actual code base, which is a bit more convoluted. I will look at it again later in the week.