Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Currently no way to handle fill_in with multiple inputs with the same label #86

Open
srcrip opened this issue Jun 14, 2024 · 1 comment

Comments

@srcrip
Copy link

srcrip commented Jun 14, 2024

main problem

there's currently nothing you can really do I think if you have more than one input with the same label name. This is a common occurrence when using inputs_for in a has_many form.

fill_in should have the option of taking a selector instead of just a label

I think label is a great default, but you should be able to fill in based on an exact name as well. I have a nested embeds form I want to fill in where the name of the field is like resume[work_experiences][0][company], and it is a nested inputs_for where each company field shares the same label but has unique names.

I'm not sure the best API to suggest, but I think some kind of ability to complexly select the element to fill in would be key.

Alternatively maybe there could be something like within that can select any element (not just a form) and would scope any further fill_ins to that scope.

@srcrip srcrip changed the title fill_in should have the option of taking a selector instead of just a label Currently no way to handle fill_in with multiple inputs with the same label Jun 14, 2024
@germsvel
Copy link
Owner

germsvel commented Jul 3, 2024

Thanks for opening this issue @srcrip!

I've worked with nested inputs too, and something that I've come to realize by working on this library is that we probably should have labels for each nested input -- even if those labels aren't visible (they might be only accessible to screen readers).

If you're using tailwind, you could add a class sr-only and the label will not be visible but it will be accessible to screen readers. Now, your app may or may not need to be accessible to screen readers, but part of the idea of this library is for the library to make it easy to do the recommended thing. I don't think it's required by any HTML standard to associate a label to an input (so I get your point), but I do think it's recommended.

Also, if you're filling in by the name of the field (in your case resume[work_experiences][0][company]), that's typically what I might use for my id. I might do something like this:

<label class="sr-only" for="resume_work_experiences_0_company">Work Experience for Company (Line 0)</label>
<input id="resume_work_experiences_0_company" name="resume[work_experiences][0][company]" type="text" />

Does that make sense?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants