Kusuma04-dev commented on PR #2902:
URL:
https://github.com/apache/incubator-kie-tools/pull/2902#issuecomment-2735546323
> @Kusuma04-dev Can you please explain how your changes fix the focus
problem? Thank you!
Hi @tiagobento , While investigating the issue of the entire properties
panel (bee+properties) being re-rendered, I found that the focus was being lost
due to the state updates. Initially, I implemented a solution where I created
an intermediate local state (localQuestion) and updated it in the onChange
handler. Then, in the onBlur event, I synced the local state with the global
state. This helped prevent unnecessary re-renders, allowing the focus to stay
intact while typing. Here's the initial solution I used :
```
const [localQuestion, setLocalQuestion] =
React.useState(decision.question?.__$$text || "");
<FormGroup label="Question">
<TextArea
aria-label={"Question"}
type={"text"}
isDisabled={isReadOnly}
value={localQuestion} {/* Local state for the input */}
onChange={(newQuestion) => {
setLocalQuestion(newQuestion); {/* Update local state */}
}}
onBlur={() => {
setState((state) => {
(state.dmn.model.definitions.drgElement![index] as
Normalized<DMN15__tDecision>).question = {
__$$text: localQuestion, {/* Sync local state with global state
on blur */}
};
});
}}
placeholder={"Enter a question..."}
style={{ resize: "vertical", minHeight: "40px" }}
rows={6}
/>
</FormGroup>
```
After discussing this approach with Luiz, we discovered that TextField
already manages the intermediate state and handles the onBlur correctly when
the field unmounts. So we have switched from TextArea to TextField.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
