palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.74k stars 2.18k forks source link

InputGroup & react-hook-form #6777

Open maxim-kalatsei-idf opened 7 months ago

maxim-kalatsei-idf commented 7 months ago

Environment Package version(s): 5.10.2 Operating System: win 11 Browser name and version: Chrome latest Code Sandbox Link to a minimal repro (fork this code sandbox):

Steps to reproduce 1- Doesn t support react hook form now with the {...register("fieldName")}.

Actual behavior

invliD commented 7 months ago

Could you provide some more details what's actually going wrong here? We do not use react-hook-form and do not support it directly, though if there is a bug in Blueprint that we can fix to resolve this issue, we will accept contributions to do so.

maxim-kalatsei-idf commented 6 months ago

Hello @invliD,

Thank you for your response. To provide more details, the issue arises when integrating React Hook Form's register function with BlueprintJS components. Specifically, the onChange method from React Hook Form does not seem to work in conjunction with BlueprintJS. This results in the state managed by useForm not being updated as expected when input values change.

Here's an example of the code that's causing the issue:

https://codesandbox.io/p/sandbox/gifted-chatterjee-lwqrnx?file=%2Fsrc%2FApp.js%3A28%2C17

In the above snippet, the expectation is that the onChange event would log the current value of the input field to the console and update the form state accordingly. However, this is not happening when using BlueprintJS's InputGroup component. It seems there might be a conflict or an oversight in how BlueprintJS handles its internal state and events, which prevents React Hook Form from capturing the changes.

I hope this clarifies the issue. If there's a workaround or a potential fix that could be implemented on Blueprint's side to support React Hook Form's functionality, it would greatly enhance the developer experience for those of us integrating these two libraries.