[25.1] Use focus/blur to prevent prop updates from changing FormText values while typing

[ahmedhamidawan]

We have a bug where in the workflow editor, while typing in a text form element, the value can get unexpectedly trimmed or reset because of the build_module API call updating the values. Using a combination of blur and focus to prevent prop values from replacing currently typed values is a solution to this.

Fixes #21205

Before 🔴
debounce_form_element_text_input_BEFORE.mp4

After 🟢 (out of date: no longer using a debounce)
debounce_form_element_text_input_AFTER.mp4

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[mvdbeek]

The test errors look legitimate to me. Maybe debounce is not the right thing? it seems that other fields are fine, is that maybe because LastQueue is used to set those values ?

[ahmedhamidawan]

I tried a slightly different approach thought it is still via a debounce. Seleniums are still failing (though fewer fails than earlier) and possibly related? Will investigate the fails to confirm.

[mvdbeek]

Yes, likely still related

[ahmedhamidawan]

Used a strategy that seems to work well!: Used a combination of blur and focus to prevent prop values from replacing currently typed values (if currently in the focus state, wait for the user to complete typing before replacing with the prop value coming from the backend -> which is eventually replaced by the final typed value if needed).

[mvdbeek]

Have you tried artificially returning values out of order ? I think this is the real issue in production ? I'm not seeing logic that would handle that ? That's what LastQueue does

[mvdbeek]

This seems backwards, it's cool that things update in the editor as you type

[ahmedhamidawan]

Things will still update as you type in the editor though, it's just that if for some reason the getModule update tries to change a FormText field's value while the user types, this prevents that (so it's the other way around?).

[ahmedhamidawan]

Have you tried artificially returning values out of order ? I think this is the real issue in production ? I'm not seeing logic that would handle that ? That's what LastQueue does

But aren't we already using LastQueue here:

galaxy/client/src/components/Workflow/Editor/Index.vue

Lines 1048 to 1062 in bf9ea7d

	onSetData(stepId, newData) {
	this.lastQueue
	.enqueue(() => getModule(newData, stepId, this.stateStore.setLoadingState))
	.then((data) => {
	const partialStep = {
	content_id: data.content_id,
	inputs: data.inputs,
	outputs: data.outputs,
	config_form: data.config_form,
	tool_state: data.tool_state,
	tool_version: data.tool_version,
	errors: data.errors,
	};
	this.stepActions.updateStep(stepId, partialStep);
	});

... which this propagates all the way up to?