From af040a6c085ea73c2da0bd24ab48a22ebd58c675 Mon Sep 17 00:00:00 2001 From: Trevor Burnham Date: Mon, 23 May 2016 15:45:11 -0400 Subject: [PATCH] Fix option group heading being cut off by scroll when menu opens HubSpot/react-select-plus#17 --- HISTORY.md | 1 + dist/react-select-plus.js | 3 ++- dist/react-select-plus.min.js | 4 ++-- examples/dist/bundle.js | 3 ++- examples/dist/standalone.js | 3 ++- lib/Select.js | 3 ++- src/Select.js | 5 ++++- 7 files changed, 15 insertions(+), 7 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index d51c57e6..2f5cbb6b 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -15,6 +15,7 @@ * fixed; issue with value object not being passed to `handleRequired`, thanks [Andrew Hite](https://github.com/andyhite) * fixed; the menu-outer container is no longer rendered when it does not contain anything, thanks [Kuan](https://github.com/khankuan) * improved; better support for IE8 in styles, thanks [Rockallite Wulf](https://github.com/rockallite) +* fixed; when opening the menu, scroll to the top of the group containing the focused option rather than to the option itself, thanks [mattics](https://github.com/mattics) ## v1.0.0-beta12 / 2016-04-02 diff --git a/dist/react-select-plus.js b/dist/react-select-plus.js index 0b3088b1..e202fd3c 100644 --- a/dist/react-select-plus.js +++ b/dist/react-select-plus.js @@ -650,8 +650,9 @@ var Select = _react2['default'].createClass({ // focus to the selected option if (this.refs.menu && this.refs.focused && this.state.isOpen && !this.hasScrolledToOption) { var focusedOptionNode = _reactDom2['default'].findDOMNode(this.refs.focused); + var focusedOptionParent = focusedOptionNode.parentElement; var menuNode = _reactDom2['default'].findDOMNode(this.refs.menu); - menuNode.scrollTop = focusedOptionNode.offsetTop; + menuNode.scrollTop = focusedOptionParent.className === 'Select-menu' ? focusedOptionNode.offsetTop : focusedOptionParent.offsetTop; this.hasScrolledToOption = true; } else if (!this.state.isOpen) { this.hasScrolledToOption = false; diff --git a/dist/react-select-plus.min.js b/dist/react-select-plus.min.js index 514c5e3c..a8641762 100644 --- a/dist/react-select-plus.min.js +++ b/dist/react-select-plus.min.js @@ -1,2 +1,2 @@ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Select=e()}}(function(){return function e(t,u,s){function o(i,r){if(!u[i]){if(!t[i]){var a="function"==typeof require&&require;if(!r&&a)return a(i,!0);if(n)return n(i,!0);var l=new Error("Cannot find module '"+i+"'");throw l.code="MODULE_NOT_FOUND",l}var p=u[i]={exports:{}};t[i][0].call(p.exports,function(e){var u=t[i][1][e];return o(u?u:e)},p,p.exports,e,t,u,s)}return u[i].exports}for(var n="function"==typeof require&&require,i=0;i=0;--u){var s=t.slice(0,u);if(e[s]&&(t===s||e[s].complete))return e[s]}}function r(e,t){return e&&"function"==typeof e.then?e.then(function(e){t(null,e)},function(e){t(e)}):void 0}var a=Object.assign||function(e){for(var t=1;tr.bottom||i.topt.offsetHeight&&!(t.scrollHeight-t.offsetHeight-t.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,t){return e?t?0===e.length:0===Object.keys(e).length:!0},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(e){if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var t=this.expandValue(e);return t?[t]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var t=this.props,u=t.labelKey,s=t.valueKey,o=t.renderInvalidValues,i=this._flatOptions;if(i&&""!==e){for(var r=0;r-1&&u0?t[u-1]:t[t.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?p["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},p["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,t){var u=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:p["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,t){return p["default"].createElement(o,{disabled:u.props.disabled||e.clearableValue===!1,key:"value-"+t+"-"+e[u.props.valueKey],onClick:n,onRemove:u.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(t&&(n=null),p["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){if(this.props.inputRenderer)return this.props.inputRenderer();var t=(0,g["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?p["default"].createElement("div",a({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):this.props.autosize?p["default"].createElement(h["default"],a({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,value:this.state.inputValue})):p["default"].createElement("div",{className:t},p["default"].createElement("input",a({},this.props.inputProps,{tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,ref:"input",required:this.state.required,value:this.state.inputValue})))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:p["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},p["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return p["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},p["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e,t){var u=this,s=null,o=this.state.inputValue;if("function"==typeof this.props.filterOptions)return this.props.filterOptions.call(this,e,o,t);if(!this.props.filterOptions)return e;var n=function(){u.props.ignoreAccents&&(o=(0,y["default"])(o)),u.props.ignoreCase&&(o=o.toLowerCase()),t&&(s=t.map(function(e){return e[u.props.valueKey]}));var n=function(e){if(s&&s.indexOf(e[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,e,o);if(!o)return!0;var t=String(e[u.props.valueKey]),n=String(e[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(t=(0,y["default"])(t)),"value"!==u.props.matchProp&&(n=(0,y["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(t=t.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&t.substr(0,o.length)===o||"value"!==u.props.matchProp&&n.substr(0,o.length)===o:"label"!==u.props.matchProp&&t.indexOf(o)>=0||"value"!==u.props.matchProp&&n.indexOf(o)>=0},r=[];return e.forEach(function(e){if(u.isGroup(e)){var s=i(e);s.options=u.filterOptions(e.options,t),s.options.length&&r.push(s)}else n(e)&&r.push(e)}),{v:r}}();return"object"==typeof n?n.v:void 0},isGroup:function(e){return e&&Array.isArray(e.options)},flattenOptions:function(e){if(e){for(var t=[],u=0;u-1,d=e===u,c=d?"focused":null,f=(0,g["default"])(s.props.optionClassName,{"Select-option":!0,"is-selected":l,"is-focused":d,"is-disabled":e.disabled});return p["default"].createElement(n,{className:f,isDisabled:e.disabled,isFocused:d,key:"option-"+r+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:l,ref:c},i(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var t=this;if(this.props.name){if(this.props.joinValues){var u=e.map(function(e){return r(e[t.props.valueKey])}).join(this.props.delimiter);return p["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:u,disabled:this.props.disabled})}return e.map(function(e,u){return p["default"].createElement("input",{key:"hidden."+u,type:"hidden",ref:"value"+u,name:t.props.name,value:r(e[t.props.valueKey]),disabled:t.props.disabled})})}},getFocusableOption:function(e){var t=this._visibleOptions;if(t.length){var u=this.state.focusedOption||e;if(u&&t.indexOf(u)>-1)return u;for(var s=0;s=0;--u){var s=t.slice(0,u);if(e[s]&&(t===s||e[s].complete))return e[s]}}function r(e,t){return e&&"function"==typeof e.then?e.then(function(e){t(null,e)},function(e){t(e)}):void 0}var a=Object.assign||function(e){for(var t=1;ta.bottom||r.topt.offsetHeight&&!(t.scrollHeight-t.offsetHeight-t.scrollTop)&&this.props.onMenuScrollToBottom()}},handleRequired:function(e,t){return e?t?0===e.length:0===Object.keys(e).length:!0},getOptionLabel:function(e){return e[this.props.labelKey]},getValueArray:function(e){if(this.props.multi){if("string"==typeof e&&(e=e.split(this.props.delimiter)),!Array.isArray(e)){if(null===e||void 0===e)return[];e=[e]}return e.map(this.expandValue).filter(function(e){return e})}var t=this.expandValue(e);return t?[t]:[]},expandValue:function(e){if("string"!=typeof e&&"number"!=typeof e)return e;var t=this.props,u=t.labelKey,s=t.valueKey,o=t.renderInvalidValues,i=this._flatOptions;if(i&&""!==e){for(var r=0;r-1&&u0?t[u-1]:t[t.length-1]),this.setState({focusedOption:o})}},selectFocusedOption:function(){return this._focusedOption?this.selectValue(this._focusedOption):void 0},renderLoading:function(){return this.props.isLoading?p["default"].createElement("span",{className:"Select-loading-zone","aria-hidden":"true"},p["default"].createElement("span",{className:"Select-loading"})):void 0},renderValue:function(e,t){var u=this,s=this.props.valueRenderer||this.getOptionLabel,o=this.props.valueComponent;if(!e.length)return this.state.inputValue?null:p["default"].createElement("div",{className:"Select-placeholder"},this.props.placeholder);var n=this.props.onValueClick?this.handleValueClick:null;return this.props.multi?e.map(function(e,t){return p["default"].createElement(o,{disabled:u.props.disabled||e.clearableValue===!1,key:"value-"+t+"-"+e[u.props.valueKey],onClick:n,onRemove:u.removeValue,value:e},s(e))}):this.state.inputValue?void 0:(t&&(n=null),p["default"].createElement(o,{disabled:this.props.disabled,onClick:n,value:e[0]},s(e[0])))},renderInput:function(e){if(this.props.inputRenderer)return this.props.inputRenderer();var t=(0,g["default"])("Select-input",this.props.inputProps.className);return this.props.disabled||!this.props.searchable?p["default"].createElement("div",a({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex||0,onBlur:this.handleInputBlur,onFocus:this.handleInputFocus,ref:"input",style:{border:0,width:1,display:"inline-block"}})):this.props.autosize?p["default"].createElement(h["default"],a({},this.props.inputProps,{className:t,tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,minWidth:"5",ref:"input",required:this.state.required,value:this.state.inputValue})):p["default"].createElement("div",{className:t},p["default"].createElement("input",a({},this.props.inputProps,{tabIndex:this.props.tabIndex,onBlur:this.handleInputBlur,onChange:this.handleInputChange,onFocus:this.handleInputFocus,ref:"input",required:this.state.required,value:this.state.inputValue})))},renderClear:function(){return!this.props.clearable||!this.props.value||this.props.multi&&!this.props.value.length||this.props.disabled||this.props.isLoading?void 0:p["default"].createElement("span",{className:"Select-clear-zone",title:this.props.multi?this.props.clearAllText:this.props.clearValueText,"aria-label":this.props.multi?this.props.clearAllText:this.props.clearValueText,onMouseDown:this.clearValue,onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEndClearValue},p["default"].createElement("span",{className:"Select-clear",dangerouslySetInnerHTML:{__html:"×"}}))},renderArrow:function(){return p["default"].createElement("span",{className:"Select-arrow-zone",onMouseDown:this.handleMouseDownOnArrow},p["default"].createElement("span",{className:"Select-arrow",onMouseDown:this.handleMouseDownOnArrow}))},filterOptions:function(e,t){var u=this,s=null,o=this.state.inputValue;if("function"==typeof this.props.filterOptions)return this.props.filterOptions.call(this,e,o,t);if(!this.props.filterOptions)return e;var n=function(){u.props.ignoreAccents&&(o=(0,y["default"])(o)),u.props.ignoreCase&&(o=o.toLowerCase()),t&&(s=t.map(function(e){return e[u.props.valueKey]}));var n=function(e){if(s&&s.indexOf(e[u.props.valueKey])>-1)return!1;if(u.props.filterOption)return u.props.filterOption.call(u,e,o);if(!o)return!0;var t=String(e[u.props.valueKey]),n=String(e[u.props.labelKey]);return u.props.ignoreAccents&&("label"!==u.props.matchProp&&(t=(0,y["default"])(t)),"value"!==u.props.matchProp&&(n=(0,y["default"])(n))),u.props.ignoreCase&&("label"!==u.props.matchProp&&(t=t.toLowerCase()),"value"!==u.props.matchProp&&(n=n.toLowerCase())),"start"===u.props.matchPos?"label"!==u.props.matchProp&&t.substr(0,o.length)===o||"value"!==u.props.matchProp&&n.substr(0,o.length)===o:"label"!==u.props.matchProp&&t.indexOf(o)>=0||"value"!==u.props.matchProp&&n.indexOf(o)>=0},r=[];return e.forEach(function(e){if(u.isGroup(e)){var s=i(e);s.options=u.filterOptions(e.options,t),s.options.length&&r.push(s)}else n(e)&&r.push(e)}),{v:r}}();return"object"==typeof n?n.v:void 0},isGroup:function(e){return e&&Array.isArray(e.options)},flattenOptions:function(e){if(e){for(var t=[],u=0;u-1,d=e===u,c=d?"focused":null,f=(0,g["default"])(s.props.optionClassName,{"Select-option":!0,"is-selected":l,"is-focused":d,"is-disabled":e.disabled});return p["default"].createElement(n,{className:f,isDisabled:e.disabled,isFocused:d,key:"option-"+r+"-"+e[s.props.valueKey],onSelect:s.selectValue,onFocus:s.focusOption,option:e,isSelected:l,ref:c},i(e))})}}();return"object"==typeof o?o.v:void 0},renderHiddenField:function(e){var t=this;if(this.props.name){if(this.props.joinValues){var u=e.map(function(e){return r(e[t.props.valueKey])}).join(this.props.delimiter);return p["default"].createElement("input",{type:"hidden",ref:"value",name:this.props.name,value:u,disabled:this.props.disabled})}return e.map(function(e,u){return p["default"].createElement("input",{key:"hidden."+u,type:"hidden",ref:"value"+u,name:t.props.name,value:r(e[t.props.valueKey]),disabled:t.props.disabled})})}},getFocusableOption:function(e){var t=this._visibleOptions;if(t.length){var u=this.state.focusedOption||e;if(u&&t.indexOf(u)>-1)return u;for(var s=0;s