Surface - How to use :on-blur event with form inputs?

Phoenix Forum Questions / Help
,
1

I am trying to create a form as a Surface.LiveComponent with Surface UI for LiveView.

I need to trigger validation on blur in some of my fields. The built in form fields don’t seem to support the :on-blur event definition. If I pass phx-blur to the opts it seems the event propagates up to the owning LiveView.

Is the right approach here to write the HTML for the form directly instead of using the helper components? Just want to make sure I’m not missing something.

2

@negcx which built-in component are you using? Normally you should be able to use the blur property on Surface buit-in form component: surface/events.ex at c5c0b1b26228d1f96a83dd14694071030858eab7 · surface-ui/surface · GitHub

<TextInput value="..." blur="my-event" />

Does it solve your issue?

3

Thank you. I figured I was missing something obvious, I had been looking through the source but didn’t find my way to the Events file. Excellent!

1 Like