I'm stuck with the Polaris Web Components Documentation

Polaris
,
1

Just started with Shopify App Development and I find myself being stuck trying to do simple tasks with the Polaris Web Components I don’t know what I’m missing but the documentation didn’t helped me with it, passed here to see If somebody knows how to do these seamless easy tasks that I can’t find myself an answer to resolve

  1. I’m trying to give interactivity to a form with useState but when trying to access on the onClick method of the s-select the Event object doesn’t give me any value it returns me isTrusted: false and that’s it

  2. I have Puzzles page where you can see a table with all the puzzles and I have the Create new puzzle button that is meant to redirect you to a new page where you can fill the form to create a new puzzle, the problem comes when defining the route I named the file app.puzzle.create.tsx following the conventions (I don’t know if its correct) but when trying to access it it ends up showing me the app.puzzle page, I couldn’t find a way to do this either

I don’t know if the documentation is bad maybe I’m the one missing something but in any case it feels a little bit troublesome to try to implement something that should be easy to do and end up not finding ways around it. Thank you in advance to anyone that reaches out and help

2

Are you seeing that onClick is a prop on Select somewhere? I think you should be using onChange or onInput. You should be able to get the value off the event using currentTarget

i.e. (event) => console.log(event.currentTarget.value)

If that’s not working would you be able to provide a codepen I can take a look at?

3

Thanks for your reply here is the piece of code

<s-select
  id="restriction_type"
  name="restriction_type"
  value={selectScope}
  onInput={(e) => {
    console.log(JSON.stringify(e));
  }}
  onChange={(e) => {
    console.log(JSON.stringify(e));
  }}
>
            <s-option value="" disabled>
              - Select a collections
            </s-option>

            {RESTRICTION_SCOPE.map((t) => (
              <s-option key={t.value} value={t.value}>
                {t.label}
              </s-option>
</s-select>

Both onInput and onChange returns me isTrusted: false