TimezonePicker is too opinionated about "noisy" timezones

Current Behavior

I am situated in timezone “America/Guayaquil”. After scrambling over my timezone not being default selected and reading the TimezonePicker code, it looks like it’s filtering “noisy” timezones (and mine seems to be such). But that has the unwanted side effect of removing the option that could match with Intl.DateTimeFormat().resolvedOptions().timeZone; which makes it either complicated or impossible to have the current user timezone default selected in the dropdown.

Expected Behavior

Filtering should consider the current user timezone and not filter that timezone to allow a default selection. In addition, it should either be possible to disable the filtering completely with a prop to get a complete unfiltered list.

Your Environment

Tech	Version
Base UI	v8.0.2
React	16.8.6
browser	Chrome 75.x

• I have searched the issues of this repository and believe that this is not a duplicate.

[houmark]

Thanks again @jh3y!

Overriding in Baseweb is something I still am not too comfortable with, but it is really powerful. There really should be more examples of overrides like this in the docs site to get people started on tweaking and give inspiration to similar overrides.

Here’s my final solution, which dynamically uses the current user time zone, but only if not already existing in the default ones. The added option is sorted into the existing list which makes it possible to make it appear as if it was always there.

const currentTime = new Date();
const myTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
let currentTimezoneOffset = currentTime.getTimezoneOffset();

<TimezonePicker
  overrides={{
    Select: {
      component: props => {
        let options = [...props.options]
        if (!props.options.filter(timezone => timezone.id === myTimeZone).length) {
          options = [...options, {
            id: myTimeZone,
            label: myTimeZone.replace(/ /g, ' ') + ' (GMT ' + formatZonedTime({ zone: { offset: currentTimezoneOffset } }, 'Z') + ': your current time zone)',
            offset: currentTimezoneOffset
          }].sort((a, b) => b.offset - a.offset)
        }
        return (
          <Select
            {...props}
            options={options}
          />
        )
      },
    }
  }}
/>

Hope it helps someone out!

[houmark]

Hey @jh3y!

Thanks for your feedback. I considered that option, but never got to try it. But if you are in fact in a time zone that’s already in the list, won’t I have duplicates? How can I know? I guess I can look at the list of countries before in some way.