atk4 / ui

Robust and easy to use PHP Framework for Web Apps
https://atk4-ui.readthedocs.io
MIT License
439 stars 104 forks source link

Click on magnifying glass in search should focus search field #2166

Open bedengler opened 4 months ago

bedengler commented 4 months ago

I have now watched multiple times users using my application when they wanted to show me something.

When they want to search something (e.g. in a grid), they intuitively click on the magnifying glass icon in the search bar first. That doesn't work, so they click into the search field itself. That's almost always 2 clicks.

I suggest therefore adding an event to the magnifying glass that focuses the cursor into the search field when clicking on it.

mvorisek commented 4 months ago

please describe repro steps on any https://ui.atk4.org/demos/ demo

bedengler commented 4 months ago

Go to https://ui.agiletoolkit.org/demos/collection/grid.php and click on the magnifying glass of the search field. Nothing happens. Click into the search field itself and the cursor jumps into the field and you can start typing.

Expected outcome: when you click on the magnifying glass, the cursor should jump into the search field and you can start typing.

mvorisek commented 4 months ago

PR welcomed.

https://ui.agiletoolkit.org/demos/form-control/input.php page/demo might be useful as some inputs there have this working.

mkrecek234 commented 4 months ago

@bedengler Generally agree, but the magnifying glass today has the function of starting the search already if the search field is not empty. This should be kept as functionality. And I see users doing this instead of pressing enter. We should in case of an improved PR make sure both functionalities are implemented: 1) For empty field setFocus to search field on click 2) For non-empty field, commit form and start search (as today).

bedengler commented 4 months ago

Good point. And fully agree. Should we also take into consideration, if $hasAutoQuery is true or false then? And keep the functionality of focussing when clicking the magnifying glass if $hasAutoQuery == true?