Use autoFocus where possible

React does the right thing with it and Elemental-UI already supports it: elementalui/elemental#165 This removes stateful code. It also works in the Modal because the Modal will not render its contents until it opens: https://github.com/elementalui/elemental/blob/620efc246d7f5fd123a2af3fa7f07bf4e745a0fb/src/components/Modal.js#L127-L128
Yaska · Jul 25, 2016 · 8b61f2a · 8b61f2a
1 parent b6dc71b
commit 8b61f2a
Show file tree

Hide file tree

Showing 11 changed files with 13 additions and 26 deletions.
diff --git a/admin/client/App/screens/List/components/ListColumnsForm.js b/admin/client/App/screens/List/components/ListColumnsForm.js
@@ -30,10 +30,6 @@ var ListColumnsForm = React.createClass({
 			selectedColumns: this.getSelectedColumnsFromStore(),
 			isOpen: visible,
 			searchString: '',
-		}, () => {
-			if (visible) {
-				this.refs.search.focus();
-			}
 		});
 	},
 	toggleColumn (path, value) {
@@ -89,7 +85,7 @@ var ListColumnsForm = React.createClass({
 	render () {
 		return (
 			<InputGroup.Section className={this.props.className}>
-				<Button ref="target" id="listHeaderColumnButton" isActive={this.state.isOpen} onClick={() => this.togglePopout(!this.state.isOpen)}>
+				<Button id="listHeaderColumnButton" isActive={this.state.isOpen} onClick={() => this.togglePopout(!this.state.isOpen)}>
 					<span className={this.props.className + '__icon octicon octicon-list-unordered'} />
 					<span className={this.props.className + '__label'}>Columns</span>
 					<span className="disclosure-arrow" />
@@ -98,7 +94,7 @@ var ListColumnsForm = React.createClass({
 					<Popout.Header title="Columns" />
 					<Popout.Body scrollable>
 						<FormField style={{ borderBottom: '1px dashed rgba(0,0,0,0.1)', paddingBottom: '1em' }}>
-							<FormInput ref="search" value={this.state.searchString} onChange={this.updateSearch} placeholder="Find a column..." />
+							<FormInput autoFocus value={this.state.searchString} onChange={this.updateSearch} placeholder="Find a column..." />
 						</FormField>
 						<PopoutList>
 							{this.renderColumns()}

diff --git a/admin/client/App/screens/List/components/ListDownloadForm.js b/admin/client/App/screens/List/components/ListDownloadForm.js
@@ -115,7 +115,7 @@ var ListDownloadForm = React.createClass({
 								<SegmentedControl equalWidthSegments options={FORMAT_OPTIONS} value={this.state.format} onChange={this.changeFormat} />
 							</FormField>
 							<FormField label="Columns:">
-								<Checkbox autofocus label="Use currently selected" onChange={this.toggleCurrentlySelectedColumns} value checked={useCurrentColumns} />
+								<Checkbox autoFocus label="Use currently selected" onChange={this.toggleCurrentlySelectedColumns} value checked={useCurrentColumns} />
 							</FormField>
 							{this.renderColumnSelect()}
 						</Form>

diff --git a/admin/client/App/screens/List/components/ListSort.js b/admin/client/App/screens/List/components/ListSort.js
@@ -45,8 +45,6 @@ var ListSort = React.createClass({
 	openPopout () {
 		this.setState({
 			popoutIsOpen: true,
-		}, () => {
-			this.refs.search.focus();
 		});
 	},
 	closePopout () {
@@ -116,7 +114,7 @@ var ListSort = React.createClass({
 					<Popout.Body scrollable>
 						<FormField style={formFieldStyles}>
 							<FormInput
-								ref="search"
+								autoFocus
 								value={this.state.searchString}
 								onChange={this.updateSearch}
 								placeholder="Find a field..."

diff --git a/admin/client/App/shared/ConfirmationDialog.js b/admin/client/App/shared/ConfirmationDialog.js
@@ -6,13 +6,6 @@ import React, { Component, PropTypes } from 'react';
 import { Modal, ModalBody, ModalFooter, Button } from 'elemental';
 
 class ConfirmationDialog extends Component {
-	componentWillReceiveProps (nextProps) {
-		if (!this.props.isOpen && nextProps.isOpen) {
-			setTimeout(() => {
-				this.refs.confirm.focus();
-			}, 0);
-		}
-	}
 	getBodyHtml () {
 		return {
 			__html: this.props.body,
@@ -37,7 +30,7 @@ class ConfirmationDialog extends Component {
 			>
 				<ModalBody dangerouslySetInnerHTML={this.getBodyHtml()} />
 				<ModalFooter>
-					<Button ref="confirm" size="sm" type={confirmationType} onClick={onConfirmation}>
+					<Button autoFocus size="sm" type={confirmationType} onClick={onConfirmation}>
 						{confirmationLabel}
 					</Button>
 					<Button size="sm" type="link-cancel" onClick={onCancel}>

diff --git a/fields/types/geopoint/GeoPointFilter.js b/fields/types/geopoint/GeoPointFilter.js
@@ -74,7 +74,7 @@ var TextFilter = React.createClass({
 						label="Latitude"
 					>
 						<FormInput
-							autofocus
+							autoFocus
 							ref="latitude"
 							type="number"
 							required="true"

diff --git a/fields/types/location/LocationField.js b/fields/types/location/LocationField.js
@@ -100,14 +100,14 @@ module.exports = Field.create({
 		return <FormInput noedit>{this.formatValue() || '(no value)'}</FormInput>;
 	},
 
-	renderField (fieldPath, label, collapse, autofocus) {
+	renderField (fieldPath, label, collapse, autoFocus) {
 		if (this.state.collapsedFields[fieldPath]) {
 			return null;
 		}
 		const { value = {}, path } = this.props;
 		return (
 			<NestedFormField label={label}>
-				<FormInput autofocus={autofocus} name={path + '.' + fieldPath} value={value[fieldPath]} onChange={this.makeChanger(fieldPath)} placeholder={label} />
+				<FormInput autoFocus={autoFocus} name={path + '.' + fieldPath} value={value[fieldPath]} onChange={this.makeChanger(fieldPath)} placeholder={label} />
 			</NestedFormField>
 		);
 	},

diff --git a/fields/types/location/LocationFilter.js b/fields/types/location/LocationFilter.js
@@ -58,7 +58,7 @@ var TextFilter = React.createClass({
 					<SegmentedControl equalWidthSegments options={INVERTED_OPTIONS} value={filter.inverted} onChange={this.toggleInverted} />
 				</FormField>
 				<FormField>
-					<FormInput autofocus ref="focusTarget" value={filter.street} onChange={this.updateValue} name="street" placeholder="Address" />
+					<FormInput autoFocus ref="focusTarget" value={filter.street} onChange={this.updateValue} name="street" placeholder="Address" />
 				</FormField>
 				<FormRow>
 					<FormField width="two-thirds">

diff --git a/fields/types/name/NameField.js b/fields/types/name/NameField.js
@@ -60,7 +60,7 @@ module.exports = Field.create({
 			<FormRow>
 				<FormField width="one-half">
 					<FormInput
-						autofocus
+						autoFocus
 						autoComplete="off"
 						name={paths.first}
 						onChange={this.changeFirst}

diff --git a/fields/types/relationship/RelationshipFilter.js b/fields/types/relationship/RelationshipFilter.js
@@ -174,7 +174,7 @@ var RelationshipFilter = React.createClass({
 					<SegmentedControl equalWidthSegments options={INVERTED_OPTIONS} value={this.props.filter.inverted} onChange={this.toggleInverted} />
 				</FormField>
 				<FormField style={{ borderBottom: '1px dashed rgba(0,0,0,0.1)', paddingBottom: '1em' }}>
-					<FormInput autofocus ref="focusTarget" value={this.state.searchString} onChange={this.updateSearch} placeholder={placeholder} />
+					<FormInput autoFocus ref="focusTarget" value={this.state.searchString} onChange={this.updateSearch} placeholder={placeholder} />
 				</FormField>
 				{selectedItems.length ? (
 					<PopoutList>

diff --git a/fields/types/text/TextFilter.js b/fields/types/text/TextFilter.js
@@ -64,7 +64,7 @@ var TextFilter = React.createClass({
 				</FormField>
 				<FormSelect options={MODE_OPTIONS} onChange={this.selectMode} value={mode.value} />
 				<FormField>
-					<FormInput autofocus ref="focusTarget" value={this.props.filter.value} onChange={this.updateValue} placeholder={placeholder} />
+					<FormInput autoFocus ref="focusTarget" value={this.props.filter.value} onChange={this.updateValue} placeholder={placeholder} />
 				</FormField>
 			</div>
 		);

diff --git a/fields/types/textarray/TextArrayFilter.js b/fields/types/textarray/TextArrayFilter.js
@@ -64,7 +64,7 @@ var TextArrayFilter = React.createClass({
 				<FormSelect options={PRESENCE_OPTIONS} onChange={this.selectPresence} value={presence.value} />
 				<FormSelect options={MODE_OPTIONS} onChange={this.selectMode} value={mode.value} />
 				<FormField>
-					<FormInput autofocus ref="focusTarget" value={this.props.filter.value} onChange={this.updateValue} placeholder={placeholder} />
+					<FormInput autoFocus ref="focusTarget" value={this.props.filter.value} onChange={this.updateValue} placeholder={placeholder} />
 				</FormField>
 			</div>
 		);