Best practice for using remix Form and complex components like MUI or AntD

[adrianmroz-allegro]

Hi!

I need to add filtering to my remix route. It is possible to pick multiple countries and right no I'm presenting them using AntD Select.

Ideally I would create remix Form element, put Select inside and Form after submission would redirect me to url with multiple countries values in query string. But I don't think that's possible, because AntD Select doesn't render any native form element with values.

So my question is how should I do this according to guidelines? Right now I just call setSearchParams but I'm missing on all nice things from Remix like deduplicating requests and so on. Maybe should I reimplement my own form component, with some local state and use useSubmit hook?

[kiliman]

When I have to use a UI component that doesn’t support native inputs 😳 I will create a wrapper component.

function Wrapper({name, defaultValue}) {
  const [value, setValue] = useState(defaultValue)
  return (
  <>
    <input type=“hidden” name={name} value={value}/>
    <Component value={value} onChange={setValue}/>
  </>)
}

[adrianmroz-allegro]

But in my case I would need to create <select> tag with some <options> and hide them with css, right?