Fix Picker re-positioning on popup contents change, fix non-critical exception when handling a bogus click in a closed popup
parent
8e09ec62a3
commit
d155becf23
23
Picker.js
23
Picker.js
|
@ -205,6 +205,13 @@ export default class Picker extends React.Component
|
||||||
{
|
{
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
let ph;
|
||||||
|
if (this.state.height)
|
||||||
|
{
|
||||||
|
ph = this.picker.style.height;
|
||||||
|
// Trigger reflow
|
||||||
|
this.picker.style.height = 'auto';
|
||||||
|
}
|
||||||
const inputRect = this.input
|
const inputRect = this.input
|
||||||
? ReactDOM.findDOMNode(this.input).getBoundingClientRect()
|
? ReactDOM.findDOMNode(this.input).getBoundingClientRect()
|
||||||
: { left: this.props.popupX||0, top: this.props.popupY||0 };
|
: { left: this.props.popupX||0, top: this.props.popupY||0 };
|
||||||
|
@ -214,6 +221,10 @@ export default class Picker extends React.Component
|
||||||
{
|
{
|
||||||
this.setState(pos);
|
this.setState(pos);
|
||||||
}
|
}
|
||||||
|
else if (ph)
|
||||||
|
{
|
||||||
|
this.picker.style.height = ph;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static getScrollHeight(el)
|
static getScrollHeight(el)
|
||||||
|
@ -233,15 +244,15 @@ export default class Picker extends React.Component
|
||||||
const screen_width = window.innerWidth || document.documentElement.offsetWidth;
|
const screen_width = window.innerWidth || document.documentElement.offsetWidth;
|
||||||
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
const screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||||
let direction = props && props.direction;
|
let direction = props && props.direction;
|
||||||
if (!direction || direction === 'auto')
|
|
||||||
{
|
|
||||||
const down = input_pos.top + popup_size.height < screen_height ||
|
|
||||||
input_pos.top < screen_height/2;
|
|
||||||
direction = down ? 'down' : 'up';
|
|
||||||
}
|
|
||||||
let top = input_pos.top
|
let top = input_pos.top
|
||||||
+ (props.usePortal ? (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) : 0)
|
+ (props.usePortal ? (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) : 0)
|
||||||
- (document.documentElement.clientTop || document.body.clientTop || 0);
|
- (document.documentElement.clientTop || document.body.clientTop || 0);
|
||||||
|
if (!direction || direction === 'auto')
|
||||||
|
{
|
||||||
|
const down = top + (input_pos.height||0) + popup_size.height < screen_height-32 ||
|
||||||
|
(top + (input_pos.height||0)) < screen_height/2;
|
||||||
|
direction = down ? 'down' : 'up';
|
||||||
|
}
|
||||||
const max_height = (direction == 'down' ? screen_height-top-(input_pos.height||0)-32 : top-32);
|
const max_height = (direction == 'down' ? screen_height-top-(input_pos.height||0)-32 : top-32);
|
||||||
const height = Math.ceil(popup_size.height < max_height ? popup_size.height : max_height);
|
const height = Math.ceil(popup_size.height < max_height ? popup_size.height : max_height);
|
||||||
top = direction == 'down' ? (top + (input_pos.height||0)) : (top - height);
|
top = direction == 'down' ? (top + (input_pos.height||0)) : (top - height);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
// Menu-like Picker variant with keyboard control
|
// Menu-like Picker variant with keyboard control
|
||||||
// Version 2021-09-18
|
// Version 2021-10-07
|
||||||
// License: LGPLv3.0+
|
// License: LGPLv3.0+
|
||||||
// (c) Vitaliy Filippov 2020+
|
// (c) Vitaliy Filippov 2020+
|
||||||
|
|
||||||
|
@ -79,6 +79,10 @@ export default class PickerMenu extends Picker
|
||||||
|
|
||||||
onMouseDown = (ev) =>
|
onMouseDown = (ev) =>
|
||||||
{
|
{
|
||||||
|
if (this.state.active == null)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!this.props.keepOnClick)
|
if (!this.props.keepOnClick)
|
||||||
{
|
{
|
||||||
if (this.input)
|
if (this.input)
|
||||||
|
|
Loading…
Reference in New Issue