Calculate position correctly when minWidth is set

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

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}