fix: remove trim from onchange event and trim the value onBlur (#4729)

[victorchrollo14]

Description

fixes issue #4729
the issues was happening since the value during onchange event had a trim in the end that removed the space from the end and beginning.

we removed the trim from onchange event and moved it to onBlur, so while typing we can enter space at the end and beginning, but when the element looses focus we trim the value.

Steps for reproduction

1. select an instance
2. click on settings in right side panel
3. edit the name and you can add a space at the end and beginning.

Code Review

• hi @kof, I need you to do
  • conceptual review (feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[TrySound]

save is not invoked

[TrySound]

I would do trimming inside of useLocalValue callback instead

[victorchrollo14]

I would do trimming inside of useLocalValue callback instead

I tried this initially but the text was getting trimmed after a few milliseconds when we are typing.

screenrecord-2025-02-19_21-26-27.mp4

we could use something like the following
export a new function inside the useLocalvalue hook.

  const finalSave = (value: Type) => {
    localValueRef.current = value;
    setRefresh((refresh) => refresh + 1);
    save();
  };

then run it on the onBlur event as follows, which would trim out the white space and also call the save function to sync the value on the server. what do you think @TrySound

<InputField
          id={id}
          /* Key is required, otherwise when label is undefined, previous value stayed */
          key={selectedInstance.id}
          placeholder={placeholder}
          value={localValue.value}
          onChange={(event) => localValue.set(event.target.value)}
          onBlur={(event) =>
            localValue.finalSave(
              (event.target as HTMLInputElement).value.trim()
            )
          }
        />

[kof]

this doesn't sound like great addition to the api, semantics with this are messy.

[kof]

@TrySound maybe take over and see what's the best solution, because we are not getting anywhere

[kof]

to me it seemed like the initial version, where he was setting the trimmed value on blur and then calling save was a good call