diff --git a/Picker.js b/Picker.js index a2ee547..18feaaa 100644 --- a/Picker.js +++ b/Picker.js @@ -4,7 +4,7 @@ // ...Or maybe a button with a popup menu // License: LGPLv3.0+ // (c) Vitaliy Filippov 2019+ -// Version 2021-09-14 +// Version 2021-09-18 import React from 'react'; import ReactDOM from 'react-dom'; @@ -216,9 +216,20 @@ export default class Picker extends React.Component } } + static getScrollHeight(el) + { + let h = el.offsetHeight; + for (const child of el.querySelectorAll('.scrollable')) + { + h += child.scrollHeight - child.offsetHeight; + } + return h; + } + static calculatePopupPosition(input_pos, popup, props) { - const popup_size = ReactDOM.findDOMNode(popup).getBoundingClientRect(); + const popup_node = ReactDOM.findDOMNode(popup); + const popup_size = { width: popup_node.offsetWidth, height: Picker.getScrollHeight(popup_node) }; const screen_width = window.innerWidth || document.documentElement.offsetWidth; const screen_height = window.innerHeight || document.documentElement.offsetHeight; let direction = props && props.direction; diff --git a/PickerMenu.js b/PickerMenu.js index bb241d8..523e7b9 100644 --- a/PickerMenu.js +++ b/PickerMenu.js @@ -1,5 +1,5 @@ // Menu-like Picker variant with keyboard control -// Version 2021-09-14 +// Version 2021-09-18 // License: LGPLv3.0+ // (c) Vitaliy Filippov 2020+ @@ -126,7 +126,7 @@ export default class PickerMenu extends Picker } return (
{this.props.beforeItems} @@ -149,16 +149,20 @@ export default class PickerMenu extends Picker }; } - componentDidUpdate() + componentDidUpdate(prevProps) { - super.componentDidUpdate(); - if (this.input && this.state.focused) + super.componentDidUpdate(prevProps); + if (this.state.focused) { - if (this.prevHeight && this.input.offsetHeight != this.prevHeight) + if (this.prevHeight && this.input && this.input.offsetHeight != this.prevHeight || + this.props.items != prevProps.items) { this.calculateDirection(); } - this.prevHeight = this.input.offsetHeight; + if (this.input) + { + this.prevHeight = this.input.offsetHeight; + } } } }