From fc5e75fab8449d2b31446340dfdda4a1c63cc0c9 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Tue, 3 Sep 2019 02:02:25 +0300
Subject: [PATCH] Remove extra <div> wrapper from Picker

---
 Picker.js    | 25 ++++++++++++++++---------
 Selectbox.js | 10 +++++-----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/Picker.js b/Picker.js
index 1665c11..b7cc15b 100644
--- a/Picker.js
+++ b/Picker.js
@@ -2,14 +2,15 @@
 // Renders something and then when that "something" is focused renders a popup layer next to it
 // For example, a text input with a popup selection list
 // ...Or maybe a button with a popup menu
+// License: LGPLv3.0+
 // (c) Vitaliy Filippov 2019+
-// Version 2019-08-30
+// Version 2019-09-03
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
-export class Picker extends React.Component
+export default class Picker extends React.Component
 {
     static propTypes = {
         direction: PropTypes.string,
@@ -79,7 +80,7 @@ export class Picker extends React.Component
 
     render()
     {
-        return (<div style={this.props.style} className={this.props.className}>
+        return (<React.Fragment>
             {this.props.renderInput({
                 onFocus: this.focus,
                 onBlur: this.blur,
@@ -99,7 +100,7 @@ export class Picker extends React.Component
                     {this.props.renderPicker()}
                 </div>
                 : null}
-        </div>);
+        </React.Fragment>);
     }
 
     componentDidUpdate()
@@ -116,25 +117,31 @@ export class Picker extends React.Component
         {
             return;
         }
-        const picker_height = ReactDOM.findDOMNode(this.picker).getBoundingClientRect().height;
+        const picker_size = ReactDOM.findDOMNode(this.picker).getBoundingClientRect();
         const client = ReactDOM.findDOMNode(this.input).getBoundingClientRect();
+        const screen_width = window.innerWidth || document.documentElement.offsetWidth;
         const screen_height = window.innerHeight || document.documentElement.offsetHeight;
         let direction = this.props.direction;
         if (!direction || direction === 'auto')
         {
-            const down = client.top + picker_height < screen_height;
+            const down = client.top + picker_size.height < screen_height;
             direction = down ? 'down' : 'up';
         }
         let top = client.top
             + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
             - (document.documentElement.clientTop || document.body.clientTop || 0);
         const max_height = (direction == 'down' ? screen_height-top-client.height-32 : top-32);
-        const height = picker_height < max_height ? picker_height : max_height;
+        const height = picker_size.height < max_height ? picker_size.height : max_height;
         top = direction == 'down' ? (top + client.height) : (top - height);
-        const left = (client.left
+        let left = (client.left
             + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft)
             - (document.documentElement.clientLeft || document.body.clientLeft || 0));
-        const width = (this.props.minWidth && client.width < this.props.minWidth ? this.props.minWidth : client.width);
+        if (left + picker_size.width > screen_width)
+        {
+            left = screen_width - picker_size.width;
+        }
+        let width = client.width > picker_size.width ? client.width : picker_size.width;
+        width = (this.props.minWidth && width < this.props.minWidth ? this.props.minWidth : width);
         if (this.state.top !== top || this.state.left !== left ||
             this.state.width !== width || this.state.height !== height)
         {
diff --git a/Selectbox.js b/Selectbox.js
index b6dbb2a..3f041ab 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 2019-08-30
+// Version 2019-09-03
 // License: LGPLv3.0+
 // (c) Vitaliy Filippov 2019+
 
@@ -7,7 +7,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import autocomplete_css from './autocomplete.css';
-import { Picker } from './Picker.js';
+import Picker from './Picker.js';
 
 export default class Selectbox extends React.PureComponent
 {
@@ -218,7 +218,9 @@ export default class Selectbox extends React.PureComponent
                 (this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
                 (this.props.multiple
                     ? ' '+(autocomplete_css.multiple||'')
-                    : (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : ''))}
+                    : (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : '')) +
+                (this.props.className ? ' '+this.props.className : '')}
+            style={this.props.style}
             onClick={this.focusInput}>
             {this.props.multiple
                 ? <div className={autocomplete_css.values}>
@@ -332,8 +334,6 @@ export default class Selectbox extends React.PureComponent
             clearOnClick={true}
             renderInput={this.renderInput}
             renderPicker={this.renderSuggestions}
-            className={this.props.className}
-            style={this.props.style}
         />);
     }