Multi select actions the remix way (help me stop using useFetcher for everything)

[dan-cooke]

I'm struggling to avoid using useFetcher for this use case, but maybe someone can enlighten me.

I have a multi-select UI where users can select multiple of their portfolios:

And then perform various actions on them from the dropdown.

Right now the only action is Delete selected, but there wil be many more options that are not easily described by a method.

Additionally this component will be used on many screens, with slightly different actions to handle various types of portfolio

How do I build this with remix forms?

So my first attempt was to name the checkbox on each of the Cards so simply it would look lke

<form>
      <button type='submit'>delete selected</button>
     <input name='portfolio' value={selected ? portfolioId : null} />
     <input name='portfolio' value={selected ? portfolioId : null} />
     <input name='portfolio' value={selected ? portfolioId : null} / >
</form>

But how do I then describe other submits within the same form,

I feel like just opting out of remix forms and using useFetcher is what I end up doing a lot of the time in my application, would really appreciate it if someone could stop me doing this

Edit

I've just found #3138

I like kent's approach there using intent on the buttons - this is pretty much exactly what I want.

But also I realise that I cold just describe my updates using the PATCH verb

[sergiodxa]

Add a name to every button in the form and use it to identify the button inside your action.

If you have multiple forms with one button, add a single input of type hidden with the same name in every form, and use it to identify the form inside your action.

I don't recommend you to use PATCH, GET for loaders and POST for actions is simpler to grasp, and Form doesn't natively work with other methods anyway so in case your form can work without JS it will use POST instead of PATCH and your logic will break.

[dan-cooke]

Yeah this is pretty much what I’ve settled on, quite elegant