Inline editor losing field focus and showing validation using onblur

Wappler General
1

Hi
Has anyone got a nice inline editor working in wappler?

I have a page that lists itinerary items. I have the page giving a form for each item with its fields.

On the fields I have a onblur so when you leave the input it does an update and on form success reloads the sc that creates the list.

I have 3 problems:

  1. when I tab out the input field to the next, it does its update, and then loses focus of the field i tabbed to
  2. i dont have any validation on the fields but when i tab out it runs I guess basic bootstrap validation and shows a tick
  3. the onblur is triggered even if there has been no change, so I would guess it needs some conbination of a change + blur event?

has anyone got this working nicely in wappler?

Thanks
darren

2

Not sure, but have you tried this feature to see if it stops losing focus?

image

With 2, you can easily remove the tick for all your forms (not just this one) as its essentially a boolean option in the bootrap file. If you're using Wappler theme studio you can do it by unselecting validation icons :slight_smile:
image

If you only want to do it for this inline form, you'll probably need to create some custom CSS to override the bootstrap behaviour.

With 3, I guess you could put in a ternary condition in the submit step...Not sure how your form is set up, but mine usually are prepopulated from a database query... so i'd write something like:

form.input1.value != serverConnect1.data.someField.value ? form.submit() : do nothing

I'm not sure on what the syntax for 'do nothing' is, but that's what i';d play around with if it was me. I'm sure others might have more elegant solutions.

Cheers!

3

Not sure if I have a solution for this, but this looks like an expected behaviour. Since you submit the form, that event might be moving the focus elsewhere like outside the form or submit button. Or just simply un-focusing the field in question.

Like Philip has suggested, either use the theme builder in Wappler to and switch option off there. Or, override the default behaviour using CSS. You might find solutions if you Google.

Why not use the change/update event?