Reflex DOM: How to select all text inside an input element

Learn
1

I’m currently creating a web application with Reflex / Reflex DOM.

I have the following function to create an input element:

mkInputElement :: (DomBuilder t m, PostBuild t m) => T.Text -> m (InputElement EventResult (DomBuilderSpace m) t)
mkInputElement initialValue = do
  input <-
    inputElement $
      def
        & inputElementConfig_initialValue
        .~ initialValue

  return t

When I click into the input element I want to under some conditions select all text. For now let’s say I want to always do it when the user clicks into the element.
So I have this event set up:

  let focusGained = ffilter (== True) $ updated $ input._inputElement_hasFocus

Now, I wasn’t able to figure out how I can select all text.
I assume I somehow must “perform” an event to select text inside the input. But I’m not sure how to define the action that is performed and how to then use performEvent function.

Or I somehow must use JavaScript FFI to use the input.focus() function, but I assume this must be possible by just using Reflex.

Or there is another way how this works. Could someone shed some light on how I can achieve this?

1 Like