diff --git a/Picker.js b/Picker.js index 18feaaa..c69626b 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-18 +// Version 2021-10-07 import React from 'react'; import ReactDOM from 'react-dom'; @@ -245,15 +245,15 @@ export default class Picker extends React.Component 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); top = direction == 'down' ? (top + (input_pos.height||0)) : (top - height); + let width = (input_pos.width||0) > popup_size.width ? input_pos.width : popup_size.width; + width = Math.ceil(props && props.minWidth && width < props.minWidth ? props.minWidth : width); let left = (input_pos.left + (props.usePortal ? (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft) : 0) - (document.documentElement.clientLeft || document.body.clientLeft || 0)); - if (left + popup_size.width > screen_width) + if (left + width > screen_width) { - left = screen_width - popup_size.width; + left = screen_width - width; } - let width = (input_pos.width||0) > popup_size.width ? input_pos.width : popup_size.width; - width = Math.ceil(props && props.minWidth && width < props.minWidth ? props.minWidth : width); return { top, left, width, height }; } } diff --git a/Selectbox.js b/Selectbox.js index c64a278..0eea21e 100644 --- a/Selectbox.js +++ b/Selectbox.js @@ -1,5 +1,5 @@ // Simple Dropdown/Autocomplete with single/multiple selection and easy customisation via CSS modules -// Version 2021-09-14 +// Version 2021-09-18 // License: LGPLv3.0+ // (c) Vitaliy Filippov 2019+ @@ -34,6 +34,8 @@ export default class Selectbox extends React.PureComponent valueKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // item "disabled" key - default none disabledKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + // item CSS class key - default none + classKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // automatically filter autocomplete options based on user input if `true` suggestionMatch: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['disabled'])]), // additional message to display below autocomplete options (arbitrary HTML, for example "...") @@ -287,6 +289,7 @@ export default class Selectbox extends React.PureComponent items={this.filtered_items} labelKey={this.props.labelKey||'name'} disabledKey={this.props.disabledKey} + classKey={this.props.classKey} afterItems={this.props.suggestionMsg} onSelectItem={this.onSelectItem} usePortal={this.props.usePortal}