How to open DateTimePicker onClick of a button?

[souhagaa]

Is it possible to make DateTimePicker open on the click of an icon? I am using leftSection prop to add a calendar icon to the input but I'm not sure how to make the picker open up on click of the icon
I only managed to set the focus using a ref on the picker and onClick={() => inputRef.current?.inputElement?.focus()} on the icon but no idea how to actually open the popover onClick
Thank you in advance any help is appreciated 😄

[rtivital]

onClick={() => inputRef.current?.inputElement?.click()}

[souhagaa]

@rtivital thanks for your answer, I tried that but it doesn't work I get a TS error Property 'inputElement' does not exist on type 'HTMLButtonElement' and nothing happens when I click .. Here is a codesandbox imitating the code I have

  const inputEl = useRef<HTMLButtonElement>(null);

 const leftSection = useMemo(
    () => (
      <ActionIcon
        onClick={() => inputEl.current?.inputElement?.click()}
      >
        <Icon icon="calendar" />
      </ActionIcon>
    ),
    [],
  );

<DateTimePicker
ref={inputEl} 
leftSection={leftSection}
.... />

[rtivital]

https://codesandbox.io/p/sandbox/mantine-react-template-forked-zm4lz6?file=%2Fsrc%2FApp.tsx%3A5%2C10

[souhagaa]

Thank you so much for the guidance 🙏