Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDualRange] Fix initial incorrect thumb position #4230

Merged
merged 6 commits into from
Nov 6, 2020
Merged

[EuiDualRange] Fix initial incorrect thumb position #4230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f1c4858
trigger rerender after width is no longer 0
thompsongl Nov 5, 2020
8240e6f
revert me
thompsongl Nov 5, 2020
877b1c7
Merge branch 'master' into dualrange-isvisible
thompsongl Nov 6, 2020
a6a2f5b
Revert "revert me"
thompsongl Nov 6, 2020
f78a32e
add comment
thompsongl Nov 6, 2020
1f3fa03
CL
thompsongl Nov 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- Fixed focus trap error & performance impact when one focus trap is deactivated and another becomes enabled ([#4071](https://github.com/elastic/eui/pull/4071))
- Fixed a condition in `EuiInMemoryTable` to avoid mistaken assignment of `sortName` ([#4138](https://github.com/elastic/eui/pull/4138))
- Fixed bug in small `EuiImage`'s not respecting the optional sizes when `allowFullScreen` is set to true ([#4207](https://github.com/elastic/eui/pull/4207))
- Fixed incorrect initial rendering of `EuiDualRange` thumbs when element width is 0 ([#4230](https://github.com/elastic/eui/pull/4230))

## [`30.2.0`](https://github.com/elastic/eui/tree/v30.2.0)

Expand Down
19 changes: 19 additions & 0 deletions src/components/form/range/dual_range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
rangeSliderRefAvailable: false,
isPopoverOpen: false,
rangeWidth: undefined,
isVisible: true, // used to trigger a rerender if initial element width is 0
};

preventPopoverClose = false;
Expand Down Expand Up @@ -155,6 +156,24 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
return this.lowerValueIsValid && this.upperValueIsValid;
}

componentDidMount() {
if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
// Safe to call `setState` inside conditional
// https://reactjs.org/docs/react-component.html#componentdidmount
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({ isVisible: false });
}
}

componentDidUpdate() {
if (this.rangeSliderRef?.clientWidth && !this.state.isVisible) {
// Safe to call `setState` inside conditional
// https://reactjs.org/docs/react-component.html#componentdidupdate
// eslint-disable-next-line react/no-did-update-set-state
this.setState({ isVisible: true });
}
}

_determineInvalidThumbMovement = (
newVal: ValueMember,
lower: ValueMember,
Expand Down