Skip to content

Commit

Permalink
Use preferred callback refs
Browse files Browse the repository at this point in the history
  • Loading branch information
@gojohnnygo
gojohnnygo committed Jul 28, 2016
1 parent e19bce3 commit e8bcab8
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 33 deletions.
4 changes: 2 additions & 2 deletions src/Async.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const Async = React.createClass({
}
},
focus () {
this.refs.select.focus();
this.select.focus();
},
resetState () {
this._currentRequestId = -1;
Expand Down Expand Up @@ -153,7 +153,7 @@ const Async = React.createClass({
return (
<Select
{...this.props}
ref="select"
ref={(ref) => this.select = ref}
isLoading={isLoading}
noResultsText={noResultsText}
onInputChange={this.loadOptions}
Expand Down
42 changes: 21 additions & 21 deletions src/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,27 +187,27 @@ const Select = React.createClass({

componentDidUpdate (prevProps, prevState) {
// focus to the selected option
if (this.refs.menu && this.refs.focused && this.state.isOpen && !this.hasScrolledToOption) {
let focusedOptionNode = ReactDOM.findDOMNode(this.refs.focused);
let menuNode = ReactDOM.findDOMNode(this.refs.menu);
if (this.menu && this.focused && this.state.isOpen && !this.hasScrolledToOption) {
let focusedOptionNode = ReactDOM.findDOMNode(this.focused);
let menuNode = ReactDOM.findDOMNode(this.menu);
menuNode.scrollTop = focusedOptionNode.offsetTop;
this.hasScrolledToOption = true;
} else if (!this.state.isOpen) {
this.hasScrolledToOption = false;
}

if (this._scrollToFocusedOptionOnUpdate && this.refs.focused && this.refs.menu) {
if (this._scrollToFocusedOptionOnUpdate && this.focused && this.menu) {
this._scrollToFocusedOptionOnUpdate = false;
var focusedDOM = ReactDOM.findDOMNode(this.refs.focused);
var menuDOM = ReactDOM.findDOMNode(this.refs.menu);
var focusedDOM = ReactDOM.findDOMNode(this.focused);
var menuDOM = ReactDOM.findDOMNode(this.menu);
var focusedRect = focusedDOM.getBoundingClientRect();
var menuRect = menuDOM.getBoundingClientRect();
if (focusedRect.bottom > menuRect.bottom || focusedRect.top < menuRect.top) {
menuDOM.scrollTop = (focusedDOM.offsetTop + focusedDOM.clientHeight - menuDOM.offsetHeight);
}
}
if (this.props.scrollMenuIntoView && this.refs.menuContainer) {
var menuContainerRect = this.refs.menuContainer.getBoundingClientRect();
if (this.props.scrollMenuIntoView && this.menuContainer) {
var menuContainerRect = this.menuContainer.getBoundingClientRect();
if (window.innerHeight < menuContainerRect.bottom + this.props.menuBuffer) {
window.scrollBy(0, menuContainerRect.bottom + this.props.menuBuffer - window.innerHeight);
}
Expand All @@ -219,8 +219,8 @@ const Select = React.createClass({
},

focus () {
if (!this.refs.input) return;
this.refs.input.focus();
if (!this.input) return;
this.input.focus();

if (this.props.openAfterFocus) {
this.setState({
Expand All @@ -230,8 +230,8 @@ const Select = React.createClass({
},

blurInput() {
if (!this.refs.input) return;
this.refs.input.blur();
if (!this.input) return;
this.input.blur();
},

handleTouchMove (event) {
Expand Down Expand Up @@ -291,7 +291,7 @@ const Select = React.createClass({
// Call focus() again here to be safe.
this.focus();

let input = this.refs.input;
let input = this.input;
if (typeof input.getInput === 'function') {
// Get the actual DOM input if the ref is an <Input /> component
input = input.getInput();
Expand Down Expand Up @@ -365,7 +365,7 @@ const Select = React.createClass({

handleInputBlur (event) {
// The check for menu.contains(activeElement) is necessary to prevent IE11's scrollbar from closing the menu in certain contexts.
if (this.refs.menu && (this.refs.menu === document.activeElement || this.refs.menu.contains(document.activeElement))) {
if (this.menu && (this.menu === document.activeElement || this.menu.contains(document.activeElement))) {
this.focus();
return;
}
Expand Down Expand Up @@ -763,7 +763,7 @@ const Select = React.createClass({
onBlur: this.handleInputBlur,
onChange: this.handleInputChange,
onFocus: this.handleInputFocus,
ref: 'input',
ref: ref => this.input = ref,
required: this.state.required,
value: this.state.inputValue
});
Expand All @@ -781,7 +781,7 @@ const Select = React.createClass({
tabIndex={this.props.tabIndex || 0}
onBlur={this.handleInputBlur}
onFocus={this.handleInputFocus}
ref="input"
ref={ref => this.input = ref}
aria-readonly={'' + !!this.props.disabled}
style={{ border: 0, width: 1, display:'inline-block' }}/>
);
Expand Down Expand Up @@ -926,7 +926,7 @@ const Select = React.createClass({
return (
<input
type="hidden"
ref="value"
ref={ref => this.value = ref}
name={this.props.name}
value={value}
disabled={this.props.disabled} />
Expand Down Expand Up @@ -967,8 +967,8 @@ const Select = React.createClass({
}

return (
<div ref="menuContainer" className="Select-menu-outer" style={this.props.menuContainerStyle}>
<div ref="menu" role="listbox" className="Select-menu" id={this._instancePrefix + '-list'}
<div ref={ref => this.menuContainer = ref} className="Select-menu-outer" style={this.props.menuContainerStyle}>
<div ref={ref => this.menu = ref} role="listbox" className="Select-menu" id={this._instancePrefix + '-list'}
style={this.props.menuStyle}
onScroll={this.handleMenuScroll}
onMouseDown={this.handleMouseDownOnMenu}>
Expand Down Expand Up @@ -1018,11 +1018,11 @@ const Select = React.createClass({
}

return (
<div ref="wrapper"
<div ref={ref => this.wrapper = ref}
className={className}
style={this.props.wrapperStyle}>
{this.renderHiddenField(valueArray)}
<div ref="control"
<div ref={ref => this.control = ref}
className="Select-control"
style={this.props.style}
onKeyDown={this.handleKeyDown}
Expand Down
20 changes: 10 additions & 10 deletions test/Select-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@ class PropsWrapper extends React.Component {
}

getChild() {
return this.refs.child;
return this.child;
}

render() {
var Component = this.props.childComponent; // eslint-disable-line react/prop-types
return <Component {...this.state} ref="child" />;
return <Component {...this.state} ref={(ref) => this.child = ref} />;
}
}

Expand Down Expand Up @@ -119,7 +119,7 @@ describe('Select', () => {

var findAndFocusInputControl = () => {
// Focus on the input, such that mouse events are accepted
var searchInstance = ReactDOM.findDOMNode(instance.refs.input);
var searchInstance = ReactDOM.findDOMNode(instance.input);
searchInputNode = null;
if (searchInstance) {
searchInputNode = searchInstance.querySelector('input');
Expand Down Expand Up @@ -2233,7 +2233,7 @@ describe('Select', () => {

it('adds the className on to the auto-size input', () => {

expect(ReactDOM.findDOMNode(instance.refs.input),
expect(ReactDOM.findDOMNode(instance.input),
'to have attributes', {
class: ['extra-class-name', 'Select-input']
});
Expand Down Expand Up @@ -2487,23 +2487,23 @@ describe('Select', () => {
});

clickArrowToOpen();
instance.refs.menu.focus();
instance.menu.focus();

var inputFocus = sinon.spy( instance.refs.input, 'focus' );
var inputFocus = sinon.spy( instance.input, 'focus' );
instance.handleInputBlur();

expect( instance.refs.input.focus, 'was called once' );
expect( instance.input.focus, 'was called once' );
} );

it( 'should not focus the input when menu is not active', () => {
instance = createControl({
options: defaultOptions
});

var inputFocus = sinon.spy( instance.refs.input, 'focus' );
var inputFocus = sinon.spy( instance.input, 'focus' );
instance.handleInputBlur();

expect( instance.refs.input.focus, 'was not called' );
expect( instance.input.focus, 'was not called' );
} );
});

Expand Down Expand Up @@ -3236,7 +3236,7 @@ describe('Select', () => {
});

it('creates a plain input instead of an autosizable input', () => {
const inputNode = ReactDOM.findDOMNode(instance.refs.input);
const inputNode = ReactDOM.findDOMNode(instance.input);
expect(inputNode.tagName, 'to equal', 'INPUT');
});
});
Expand Down

0 comments on commit e8bcab8

Please sign in to comment.