Example "Rule": Vegetables dropdown overlay not rendered correctly

[hupf]

In the "Rule" example the second dropdown (Vegetable) does not display correctly, when opened:

This is a React Spectrum bug that occurs when the Picker component is initially hidden. It can be reproduced like this:

import React, { useState } from 'react';
import {
  Provider,
  defaultTheme,
  Picker,
  Item,
  Button,
} from '@adobe/react-spectrum';

function App() {
  const [hidden, setHidden] = useState(true);

  return (
    <Provider theme={defaultTheme}>
      <Button variant='primary' onPress={() => setHidden(!hidden)}>
        Toggle visibility
      </Button>

      <Picker label='Outside of view' isHidden={hidden}>
        <Item key='rarely'>Rarely</Item>
        <Item key='sometimes'>Sometimes</Item>
        <Item key='always'>Always</Item>
      </Picker>
    </Provider>
  );
}

export default App;

It also occurs when the Picker is inside a View component, that is initially hidden. It does not happen if the Picker is initially displayed, then hidden, then displayed again.

[mburri]

This was a know issue in react-spectrum and got fixed some days ago: https://github.com/adobe/react-spectrum/issues/1213

[mburri]

Upgrade to newest release of react-spectrum

[mburri]

Looks like the fix was not released yet - PR was merged on december 1st, last release (3.6.0) was on 2020-11-30 (!)

[mburri]

Still not fixed with @adobe/react-spectrum 3.7.0