Programatically blur components

There is a .focus() function on most if not all component that let us select inputs for the user using scripts or events. But there are no ways of unselecting a component using the same tools.

If there was some user.blur() or input1.blur() that would let us de-select components after an input is corrected or once something has loaded that would be useful.

I have two different apps where this would improve the user experience. One is used for data-entry and one is used for orders.

  • For the first one we have several different shortcuts to select and clear fields in order to quickly change inputs. Once a field is selected the shortcuts do not work until the user manually clicks outside the input.
  • For the second one we would like to close a date-range picker once the dates have been selected for the user since we noticed most users get stuck at that stage.
2 Likes

Haven't tried this, but I would test creating a hidden field and focus that in your query. It should blur everything else.

I really want this too. This is the only thing stopping me from turning the Retool app I made for my team into a power-user's dream.

Please add .blur() method to textInput and as many other components as possible!

I'll note that a .blur() would help solve @adhi-r 's issue here so he (and I) could bind escape to textInput.blur()

1 Like