Fix: autofocus of edit rows

material-table-core · Jan 22, 2022 · 7710710 · 7710710
1 parent d99d551
commit 7710710
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/src/components/MTableEditRow/index.js b/src/components/MTableEditRow/index.js
@@ -30,6 +30,7 @@ function MTableEditRow(props) {
 
   function renderColumns() {
     const size = CommonValues.elementSize(props);
+    let focusedCol = -1;
     const mapArr = props.columns
       .filter(
         (columnDef) =>
@@ -96,6 +97,9 @@ function MTableEditRow(props) {
           const { editComponent, ...cellProps } = columnDef;
           const EditComponent = editComponent || props.components.EditField;
           const error = validateInput(columnDef, state.data);
+          if (focusedCol === -1) {
+            focusedCol = index;
+          }
           return (
             <TableCell
               size={size}
@@ -108,7 +112,7 @@ function MTableEditRow(props) {
               <EditComponent
                 key={columnDef.tableData.id}
                 columnDef={cellProps}
-                autofocus={index === 0}
+                autoFocus={focusedCol === index}
                 value={value}
                 error={!error.isValid}
                 helperText={error.helperText}

diff --git a/src/components/m-table-edit-field.js b/src/components/m-table-edit-field.js
@@ -23,6 +23,7 @@ class MTableEditField extends React.Component {
       rowData,
       onRowDataChange,
       errorState,
+      autoFocus,
       onBulkEditRowChanged,
       scrollWidth,
       ...props
@@ -41,6 +42,9 @@ class MTableEditField extends React.Component {
           style={{
             fontSize: 13
           }}
+          inputProps={{
+            autoFocus: this.props.autoFocus
+          }}
           SelectDisplayProps={{ 'aria-label': this.props.columnDef.title }}
         >
           {Object.keys(this.props.columnDef.lookup).map((key) => (
@@ -74,6 +78,7 @@ class MTableEditField extends React.Component {
                   marginLeft: 9
                 }}
                 inputProps={{
+                  autoFocus: this.props.autoFocus,
                   'aria-label': this.props.columnDef.title
                 }}
               />
@@ -105,6 +110,7 @@ class MTableEditField extends React.Component {
             }
           }}
           inputProps={{
+            autoFocus: this.props.autoFocus,
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
@@ -127,6 +133,7 @@ class MTableEditField extends React.Component {
             }
           }}
           inputProps={{
+            autoFocus: this.props.autoFocus,
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
@@ -149,6 +156,7 @@ class MTableEditField extends React.Component {
             }
           }}
           inputProps={{
+            autoFocus: this.props.autoFocus,
             'aria-label': `${this.props.columnDef.title}: press space to edit`
           }}
         />
@@ -157,11 +165,9 @@ class MTableEditField extends React.Component {
   }
 
   renderTextField() {
-    const { autofocus, ...props } = this.getProps();
     return (
       <TextField
-        {...props}
-        inputRef={(input) => autofocus && input && input.focus()}
+        {...this.getProps()}
         fullWidth
         type={this.props.columnDef.type === 'numeric' ? 'number' : 'text'}
         placeholder={
@@ -182,6 +188,7 @@ class MTableEditField extends React.Component {
           }
         }}
         inputProps={{
+          autoFocus: this.props.autoFocus,
           'aria-label': this.props.columnDef.title,
           style:
             this.props.columnDef.type === 'numeric'
@@ -193,11 +200,9 @@ class MTableEditField extends React.Component {
   }
 
   renderCurrencyField() {
-    const { autofocus, ...props } = this.getProps();
     return (
       <TextField
-        {...props}
-        inputRef={(input) => autofocus && input && input.focus()}
+        {...this.getProps()}
         placeholder={
           this.props.columnDef.editPlaceholder || this.props.columnDef.title
         }
@@ -217,6 +222,7 @@ class MTableEditField extends React.Component {
           }
         }}
         inputProps={{
+          autoFocus: this.props.autoFocus,
           'aria-label': this.props.columnDef.title,
           style: { textAlign: 'right' }
         }}
@@ -254,7 +260,14 @@ MTableEditField.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.func.isRequired,
   columnDef: PropTypes.object.isRequired,
-  locale: PropTypes.object
+  locale: PropTypes.object,
+  rowData: PropTypes.object,
+  onRowDataChange: PropTypes.func,
+  errorState: PropTypes.func,
+  autoFocus: PropTypes.bool,
+  onBulkEditRowChanged: PropTypes.func,
+  scrollWidth: PropTypes.number,
+  onKeyDown: PropTypes.func
 };
 
 export default MTableEditField;