Browse Source

Calculate position correctly when minWidth is set

master
Vitaliy Filippov 1 year ago
parent
commit
8e09ec62a3
  1. 10
      Picker.js
  2. 5
      Selectbox.js

10
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 };
}
}

5
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}

Loading…
Cancel
Save