change onClick to onFocus, with a slight delay for safari

[justcallmelarry]

Background

I originally wanted to make the amount field select onFocus, as I wanted it to be possible to choose parts of the amount. It was then pointed out that onFocus does not work for Safari, since the way onMouseUp works there deselects the text again after initially selecting it. Therefore the choice was made to go with onClick instead, which seemed to work out for everyone involved, and you could still move around using the arrow keys for example if you just wanted to do edits.

Along came https://github.com/spliit-app/spliit/issues/136! So I decided to look into getting it to work better, and more in line with the original thought.

Solution

After scouring the net I found that there is a rather simple solution for allowing this to work on Safari as well, which is to add a small delay to the selection of the input, since then the mouseup event will have come and gone. I'm not sure if there are other concerns regarding the solution, but I am open to feedback on it.

Tested on

• Safari 16.5.1
• Chrome 123.0.6312.86
• Mobile Safari iOS 17.4.1

Issues

Closes https://github.com/spliit-app/spliit/issues/136 on merge