Example "Rule": Vegetables dropdown overlay not rendered correctly #60
Description
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.