noahsalvi / svelte-use-form

The most compact reactive form controller (including Validation) that you'll ever see.
MIT License
252 stars 14 forks source link

Ignore specific input from being observed #38

Closed moalamri closed 2 years ago

moalamri commented 2 years ago

Hi, In my use case, I have a list that has a search input to filter the list items. Using the search input or blurring it will bind it to the form elements, which is unnecessary to the form. What I have done as a workaround is I add an extra check to isFormMember to check if the element has id="ignore" attribute, in which it will not be considered a form element. It works but it looks awfully wrong. I'm willing to submit a PR if there is any other suggested method to avoid adding an unwanted element to the form.

Thank you 👍

noahsalvi commented 2 years ago

Hey moalamri :) Thanks for answering some of the issues here

Regarding your issue, yeah true we should definitely have a feature for ignoring elements in the form. We could instead of using the id attribute, require the user to specify a data attribute like for example data-suf-ignore or data-suf="ignore"

It would also be cool if we had an option to ignore a whole block of elements. Maybe by having a custom wrapper component? Or maybe by looking at the parents and checking if they have the attribute flag set? Although I believe this is not necessary for now.

It would be cool, if you could create a PR implementing this ignore attribute ✨

moalamri commented 2 years ago

Hey @noahsalvi. Yeah I agree that wrapping inputs could be useful, but I can't think of a use case where a set of inputs are considered to be ignored, I don't know (maybe there is) 😅. I think using one of data attributes is the best solution for now. since we are dealing with HTML inputs that's the best way of doing it, I vote for an extra data-suf-ignore attribute as it is less verbose than data-suf="ignore". I will make a PR 👍🏻

moalamri commented 2 years ago

@noahsalvi This is a bit tricky, I added the attribute and using console.log(node) I'm able to see the element, but when I call node['data-suf-ignore] it returns as undefined even tho svelte compiler has marked the attribute as a boolean value, so it should be false by default. Instead it returns undefined

image

So I gave it a value and still fail to read 😓

image

I'm for sure doing something wrong :D

UPDATE: node.hasAttribute("data-suf-ignore"); did the trick 👍🏻

noahsalvi commented 2 years ago

As per #43, I've refactored the code and it should now work. :)

noahsalvi commented 2 years ago

Let me know if this works @moalamri beta.2

moalamri commented 2 years ago

@noahsalvi Yep, it works now with beta.2 👍🏻 I will open a new issue with the issue I mentioned before on one of your commits.

Thanks a lot for the effort and for the great enhancements. cheers 👍🏻