Moved input so that value element can be scrolled

submittable · Jan 12, 2017 · 3a46fba · 3a46fba
1 parent 1fa4635
commit 3a46fba
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 19 deletions.
diff --git a/dist/react-select.css b/dist/react-select.css
@@ -79,7 +79,6 @@
   padding-right: 10px;
   position: absolute;
   right: 0;
-  top: 0;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/dist/react-select.js b/dist/react-select.js
@@ -1849,7 +1849,7 @@ var Select = _react2['default'].createClass({
 		if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
 			removeMessage = _react2['default'].createElement(
 				'span',
-				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only', 'aria-live': 'assertive' },
+				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only Select-remove-message', 'aria-live': 'assertive' },
 				this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
 			);
 		}
@@ -1878,9 +1878,9 @@ var Select = _react2['default'].createClass({
 				_react2['default'].createElement(
 					'span',
 					{ className: 'Select-multi-value-wrapper', id: this._instancePrefix + '-value' },
-					this.renderValue(valueArray, isOpen),
-					this.renderInput(valueArray, focusedOptionIndex)
+					this.renderValue(valueArray, isOpen)
 				),
+				this.renderInput(valueArray, focusedOptionIndex),
 				removeMessage,
 				this.renderLoading(),
 				this.renderClear(),

diff --git a/dist/react-select.min.css b/dist/react-select.min.css
diff --git a/dist/react-select.min.js b/dist/react-select.min.js
diff --git a/examples/dist/bundle.js b/examples/dist/bundle.js
@@ -2093,7 +2093,7 @@ var Select = _react2['default'].createClass({
 		if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
 			removeMessage = _react2['default'].createElement(
 				'span',
-				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only', 'aria-live': 'assertive' },
+				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only Select-remove-message', 'aria-live': 'assertive' },
 				this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
 			);
 		}
@@ -2122,9 +2122,9 @@ var Select = _react2['default'].createClass({
 				_react2['default'].createElement(
 					'span',
 					{ className: 'Select-multi-value-wrapper', id: this._instancePrefix + '-value' },
-					this.renderValue(valueArray, isOpen),
-					this.renderInput(valueArray, focusedOptionIndex)
+					this.renderValue(valueArray, isOpen)
 				),
+				this.renderInput(valueArray, focusedOptionIndex),
 				removeMessage,
 				this.renderLoading(),
 				this.renderClear(),

diff --git a/examples/dist/example.css b/examples/dist/example.css
@@ -79,7 +79,6 @@
   padding-right: 10px;
   position: absolute;
   right: 0;
-  top: 0;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/examples/dist/standalone.js b/examples/dist/standalone.js
@@ -1849,7 +1849,7 @@ var Select = _react2['default'].createClass({
 		if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
 			removeMessage = _react2['default'].createElement(
 				'span',
-				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only', 'aria-live': 'assertive' },
+				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only Select-remove-message', 'aria-live': 'assertive' },
 				this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
 			);
 		}
@@ -1878,9 +1878,9 @@ var Select = _react2['default'].createClass({
 				_react2['default'].createElement(
 					'span',
 					{ className: 'Select-multi-value-wrapper', id: this._instancePrefix + '-value' },
-					this.renderValue(valueArray, isOpen),
-					this.renderInput(valueArray, focusedOptionIndex)
+					this.renderValue(valueArray, isOpen)
 				),
+				this.renderInput(valueArray, focusedOptionIndex),
 				removeMessage,
 				this.renderLoading(),
 				this.renderClear(),

diff --git a/less/control.less b/less/control.less
@@ -108,7 +108,6 @@
 	padding-right: @select-padding-horizontal;
 	position: absolute;
 	right: 0;
-	top: 0;
 
 	// crop text
 	max-width: 100%;

diff --git a/lib/Select.js b/lib/Select.js
@@ -1155,7 +1155,7 @@ var Select = _react2['default'].createClass({
 		if (this.props.multi && !this.props.disabled && valueArray.length && !this.state.inputValue && this.state.isFocused && this.props.backspaceRemoves) {
 			removeMessage = _react2['default'].createElement(
 				'span',
-				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only', 'aria-live': 'assertive' },
+				{ id: this._instancePrefix + '-backspace-remove-message', className: 'Select-aria-only Select-remove-message', 'aria-live': 'assertive' },
 				this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])
 			);
 		}
@@ -1186,8 +1186,8 @@ var Select = _react2['default'].createClass({
 					{ className: 'Select-multi-value-wrapper', id: this._instancePrefix + '-value' },
 					this.renderValue(valueArray, isOpen)
 				),
-				removeMessage,
 				this.renderInput(valueArray, focusedOptionIndex),
+				removeMessage,
 				this.renderLoading(),
 				this.renderClear(),
 				this.renderArrow()

diff --git a/scss/control.scss b/scss/control.scss
@@ -96,7 +96,6 @@
 	padding-right: $select-padding-horizontal;
 	position: absolute;
 	right: 0;
-	top: 0;
 
 	// crop text
 	max-width: 100%;

diff --git a/src/Select.js b/src/Select.js
@@ -1067,7 +1067,7 @@ const Select = React.createClass({
 			this.state.isFocused &&
 			this.props.backspaceRemoves) {
 			removeMessage = (
-				<span id={this._instancePrefix + '-backspace-remove-message'} className="Select-aria-only" aria-live="assertive">
+				<span id={this._instancePrefix + '-backspace-remove-message'} className="Select-aria-only Select-remove-message" aria-live="assertive">
 					{this.props.backspaceToRemoveMessage.replace('{label}', valueArray[valueArray.length - 1][this.props.labelKey])}
 				</span>
 			);
@@ -1089,8 +1089,8 @@ const Select = React.createClass({
 				>
 					<span className="Select-multi-value-wrapper" id={this._instancePrefix + '-value'}>
 						{this.renderValue(valueArray, isOpen)}
-						{this.renderInput(valueArray, focusedOptionIndex)}
 					</span>
+					{this.renderInput(valueArray, focusedOptionIndex)}
 					{removeMessage}
 					{this.renderLoading()}
 					{this.renderClear()}