Access the event object in the onClick method of the NumberInput component (or any other event triggering methods)

[davlatsultonov]

Hello guys. Could you please help me to solve this issue.

I am trying to stop propagation on input value change. So instead of getting an event, I am getting the exact value (event.currentTarget.value)

[rtivital]

I do not see such behavior for onClick event, it is called with the event object.
https://codesandbox.io/p/sandbox/mantine-react-template-forked-qxl9xr

[davlatsultonov]

<Accordion
    >
      <Accordion.Item value={title}>
        <Accordion.Control>
          <NumberInput
                min={0}
                max={5}
                hideControls={false}
                placeholder="0 - 5"
                control={control}
              />
        </Accordion.Control>
        <Accordion.Panel>
         ...
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion>

If it is inside an accordion, it's causing accordion to open when user focus on NumberInput, or clicking controls of NumberInput

[davlatsultonov]

As a workaround I am wrapping it with a div, and calling stopPropagation

<Box onClick={(e) => e.stopPropagation()}>
    <NumberInput
      min={0}
      max={5}
      placeholder="0 - 5"
      clampBehavior="strict"
      control={control}
    />
  </Box>

[rtivital]

Using code like in your example is an accessibility violation, Mantine does not support use cases that violate accessibility rules. See https://mantine.dev/core/accordion/#compose-controls.

[davlatsultonov]

Got it, thanks for a quick reply!🤝