precise-ui
precise-ui copied to clipboard
DropdownField height increases once a value is set
Bug Report
Prerequisites
- [x] Can you reproduce the problem in a MWE?
- [x] Are you running the latest version?
- [x] Did you check the FAQs to see if that helps you?
- [x] Are you reporting to the correct repository?
- [x] Did you perform a search in the issues?
Versions
0.8.3
Description
The DropdownField increases in height from 54px to 56px once a value is set. This causes inconsistency if you for example position it next to a SearchField.
Steps to Reproduce
Paste the code below in the PreciseUI playground, and then select an item from the dropdown list (it will increase in height):
const { DropdownField, SearchField, styled } = require('precise-ui');
const items = [
"Apple",
"Orange",
];
const Container = styled.div`
display: flex;
> * { margin-right: .5em; }
`;
class MyDropdown extends React.Component {
constructor() {
super();
this.state = {
value: '',
};
this.change = (e) => {
const selected = e.value[0];
const index = items.indexOf(selected);
const value = items[(index + 1) % items.length];
this.setState({
value,
});
};
}
render() {
return <DropdownField data={items} value={this.state.value} onChange={this.change} />;
}
}
<Container>
<MyDropdown />
<SearchField label="Search" onSearch={value => console.log(value)} />
</Container>
Expected behavior: No changing height.
Actual behavior: Height increases once a value is set.

Environment details: macOS, Chrome