Incompatible props when using with react-timezone-select

[codeforcesmeme]

Hi, I've been using this wrapper with a system that uses chakra-ui and it's been amazing, thank you for maintaining this.

Recently we wanted to integrate this https://github.com/ndom91/react-timezone-select component and thought I could use the hook useChakraSelectProps to seamlessly integrate the two but there were a lot of type conflicts, why is that, is it something on my part to define/edit?

I created a small reproducible example here: https://codesandbox.io/s/react-timezone-chakra-select-h6p6j0 with a functional one (without chakra-react-select) is in App-default.tsx.

The type errors are mainly two, one in the onChange of the hook and others are aria-errormessage aria-invalid and some others.
I'm not entirely sure whether the errors are due types/generics shenanigans in either chakra-react-select or react-timezone-select but thought to post here and maybe mention @ndom91 as well.

[codeforcesmeme]

Update:

I did solve the problem(s) looking at the codebase of both packages I added the types unknown and boolean to the useChakraSelectProps hook to be compatible with react-timezone-select and faced an error in the hook with the onChange argument so I had to override in the component props.

Complete example (for documentation, if I remove the codesandbox in the future)

import { useState } from "react";
import TimezoneSelect, { ITimezone } from "react-timezone-select";
import { useChakraSelectProps } from "chakra-react-select";

import "./styles.css";
export default function App() {
  const [timezone, setTimezone] = useState<ITimezone>(
    Intl.DateTimeFormat().resolvedOptions().timeZone
  );
  const selectProps = useChakraSelectProps<unknown, boolean>({
    value: timezone,
    onChange: () => {}
  });

  return (
    <div className="App">
      <h2>
        <code>react-timezone-select</code> + <code>chakra-react-select</code>
      </h2>
      <div className="timezone--wrapper">
        <TimezoneSelect
          {...selectProps}
          value={timezone}
          onChange={setTimezone}
        />
      </div>
    </div>
  );
}

[ndom91]

PR is up: ndom91/react-timezone-select#89

[ndom91]

Should be fixed in 1.4.1+

Thanks for the suggested fix @csandman 🙏

[csandman]

@ndom91 Thanks for hopping in the discussion! Yes, it is just that one commit. The only reason it's really necessary in this case is because the props object is being defined outside the select component. Normally, the component will infer the option types based on what you pass into it. But by making a wrapper, you either have to accept the generics into the component, or define them yourself. And because in this case, the typing of the option objects is known, passing them yourself is the easiest way to fix this!

[ndom91]

Okay great, I pushed a few other open PRs to the library last night / today.

If you could check out 1.5.4+ and let me know if this use-case works for you, that's be great 🙏

[csandman]

So I'm having trouble with v1.5.4 on CodeSandbox, for some reason it's giving me an export error: https://codesandbox.io/s/chakra-react-timezone-select-yx8hl4?file=/app.tsx