nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

In a SAF UI how can we prevent the "Enter" key triggering a button later in the UI

akwells

I have recently noticed in SAF that if the user is filling a text or number input field and types *** then hits enter this can trigger the next button on the page rather than just entering the number of new text line. Obviously the enter is not needed to submit the input but this is something a user may do.

Is there any way to prevent the enter button triggering buttons later on the UI page. (I tried adding debounce = true but this did not help)

Find more posts tagged with

Accepted answers

akwells

After call with Rosalie

In the UI the inputs were returned as a dbc.Form (at line 599). If it is defined using HTML.Div the user pressing enter will not prematurely submit the form.

All comments

Rosalie Morin

Hi @akwells,

I tested this with a minimal solution created from ansys-templates and I wasn't able to reproduce this behaviour. Is it possible your UI components have been placed in an html.Form element?

Would you mind sharing a code sample for testing?

Thanks!

akwells

Hi Rosalie it uses html.div

https://github.com/ansys-internal/gearbox_flow_poc model_setup.py

Rosalie Morin

I tested the solution, but I'm not sure I'm reproducing the behaviour you described. The behaviour I'm observing is: every time I change the value of an input, an error 'step is not defined' is thrown. See video attachment for reference. When I comment out the 'clientside callback function' defined in lines 696-698, I no longer see this error.

On a slight side note the input components with debounce set to True only throws the error when I hit 'Enter' or click outside of the component. The ones with debounce set to False triggers the callback every time the value of the component changes. For example, with your input component 'y-coord' , every time the value of the input changes, this callback function is triggered:

In this callback, you are setting and saving the model_setup_step field 'mp_y' everytime this callback is triggered. The debounce property may be beneficial here to limit the number of times the step field is updated in the SAF server to only when the user hits 'Enter'.

Would you mind sharing a short recording of the behaviour you are experiencing to help me understand the problem better?

gearbox_bug.mp4

akwells

Hi Rosalie
I have sent you example json and scdoc input for the gearbox

To recreate the issue I do the following steps
1) Open a project (set version to 23R2)
2) Add the scdoc and json
3) Go to x-coordinate box and type 0.06 enter (rather than just typing 0.06 and moving to the next input)

By adding the "enter" it triggers the create base design button. The create bade design setup button is disabled until it has a valid set of input (ie it needs a .scdoc and json)

akwells

Input files from test case

model_input_works.json

spur_virtual.scdoc

Rosalie Morin

Thanks for the files. I was able to reproduce the behaviour once these files were uploaded.

After looking at your code, I can see that you are inserting the components defined in your setup to a dbc.Form component:

I found a similar issue reported here for an older version of dash-bootstrap-components (version 0.10.0). Your project is using dash-bootsrap-components version ^1.2, so this should be fixed. According to the fix mentioned here, it seems like this submit action can be overridden by setting the property prevent_default_on_submit=False, which submits the form and refreshes the page. The default value is True, so it seems like somehow this property is getting overwritten. I'm able to fix this issue by explicitly setting the property to True like this:

Let me know if this works for you!

akwells

Hi
I just tried your fix (line 559); unfortunately it does not seem to make any difference to the behavior I am seeing. The "enter" key can still triggers the base design creation.

akwells

After call with Rosalie

In the UI the inputs were returned as a dbc.Form (at line 599). If it is defined using HTML.Div the user pressing enter will not prematurely submit the form.