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

[core] fix(RangeSlider): render handle correctly on first mount in popover #6338

Merged
merged 1 commit into from
Aug 28, 2023
Merged

[core] fix(RangeSlider): render handle correctly on first mount in popover #6338

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions packages/core/src/components/slider/handle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,8 +240,13 @@ export class Handle extends AbstractPureComponent<InternalHandleProps, HandleSta

const { vertical } = this.props;

// getBoundingClientRect().height includes border size; clientHeight does not.
const handleRect = handleElement.getBoundingClientRect();
// N.B. element.clientHeight does not include border size.
// Also, element.getBoundingClientRect() is useful to get the top & left position on the page, but
// it fails to accurately measure element width & height inside absolutely-positioned and CSS-transformed
// containers like Popovers, so we use element.offsetWidth & offsetHeight instead (see https://github.com/palantir/blueprint/issues/4417).
const handleRect: DOMRect = handleElement.getBoundingClientRect();
handleRect.width = handleElement.offsetWidth;
handleRect.height = handleElement.offsetHeight;

const sizeKey = vertical
? useOppositeDimension
Expand Down
20 changes: 17 additions & 3 deletions packages/docs-app/src/examples/core-examples/popoverExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,14 @@ import {
Menu,
MenuDivider,
MenuItem,
NumberRange,
Placement,
Popover,
PopoverInteractionKind,
PopperModifierOverrides,
PopperPlacements,
RadioGroup,
RangeSlider,
Slider,
StrictModifierNames,
Switch,
Expand Down Expand Up @@ -71,6 +73,7 @@ export interface PopoverExampleState {
minimal?: boolean;
modifiers?: PopperModifierOverrides;
placement?: Placement;
rangeSliderValue?: NumberRange;
sliderValue?: number;
usePortal?: boolean;
}
Expand All @@ -96,6 +99,7 @@ export class PopoverExample extends React.PureComponent<ExampleProps, PopoverExa
preventOverflow: { enabled: true },
},
placement: "auto",
rangeSliderValue: [0, 10],
sliderValue: 5,
usePortal: true,
};
Expand All @@ -104,7 +108,9 @@ export class PopoverExample extends React.PureComponent<ExampleProps, PopoverExa

private bodyElement: HTMLElement | null = null;

private handleSliderChange = (value: number) => this.setState({ sliderValue: value });
private handleRangeSliderChange = (rangeSliderValue: NumberRange) => this.setState({ rangeSliderValue });

private handleSliderChange = (sliderValue: number) => this.setState({ sliderValue });

private handleExampleIndexChange = handleNumberChange(exampleIndex => this.setState({ exampleIndex }));

Expand Down Expand Up @@ -214,7 +220,7 @@ export class PopoverExample extends React.PureComponent<ExampleProps, PopoverExa
<HTMLSelect value={this.state.exampleIndex} onChange={this.handleExampleIndexChange}>
<option value="0">Text</option>
<option value="1">Input</option>
<option value="2">Slider</option>
<option value="2">Sliders</option>
<option value="3">Menu</option>
<option value="4">Select</option>
<option value="5">Empty</option>
Expand Down Expand Up @@ -310,7 +316,15 @@ export class PopoverExample extends React.PureComponent<ExampleProps, PopoverExa
<input autoFocus={true} className={Classes.INPUT} type="text" />
</label>
</div>,
<Slider key="slider" min={0} max={10} onChange={this.handleSliderChange} value={this.state.sliderValue} />,
<div key="sliders">
<Slider min={0} max={10} onChange={this.handleSliderChange} value={this.state.sliderValue} />
<RangeSlider
min={0}
max={10}
onChange={this.handleRangeSliderChange}
value={this.state.rangeSliderValue}
/>
</div>,
<Menu key="menu">
<MenuDivider title="Edit" />
<MenuItem icon="cut" text="Cut" label="⌘X" />
Expand Down