itsa-react-table 16.7.1 → 16.8.0

package/lib/component.jsx

@@ -450,9 +450,12 @@ class Table extends React.Component {
     _blurActiveCell() {
         const instance = this,
             state = instance.state,
-            textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol];
-        if (textareaNode && (document.activeElement===textareaNode)) {
-            textareaNode.blur();
+            textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol],
+            componentContainerNode = instance['_component_'+state.editableRow+'_'+state.editableCol],
+            componentNode = componentContainerNode && componentContainerNode.itsa_getElement('button'),
+            focussableNode = textareaNode || componentNode;
+        if (focussableNode && ((document.activeElement===focussableNode) || document.activeElement.contains(focussableNode))) {
+            focussableNode.blur();
         }
     }
 
@@ -461,7 +464,9 @@ class Table extends React.Component {
         async(() => {
             let length;
             const state = instance.state,
-                textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol];
+                textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol],
+                componentContainerNode = instance['_component_'+state.editableRow+'_'+state.editableCol],
+                componentNode = componentContainerNode && componentContainerNode.itsa_getElement('button');
             if (textareaNode && (document.activeElement!==textareaNode)) {
                 instance._editValueBeforeEdit = textareaNode.value || '';
                 textareaNode.focus();
@@ -470,6 +475,9 @@ class Table extends React.Component {
                     textareaNode.setSelectionRange(0, length);
                 }
             }
+            else if (componentNode) {
+                componentNode.focus();
+            }
         });
     }
 
@@ -628,6 +636,17 @@ class Table extends React.Component {
                                 key={field} />
                         );
                     }
+                    else if (Object.itsa_isObject(value)) {
+                        return (
+                            <td
+                                className={classname}
+                                data-colid={j}
+                                key={field}
+                                ref={node => instance['_component_'+i+'_'+j] = node}>
+                                {value}
+                            </td>
+                        );
+                    }
                     else if (fullEditable || ((editable===true) && (state.editableRow===i) && (state.editableCol===j)) && colIsEditable(j)) {
                         classname += EDITABLE_CELL_CLASS_SPACED;
                         (typeof value==='number') || value || (value='');
@@ -690,7 +709,8 @@ class Table extends React.Component {
                         <td
                             className={classname}
                             data-colid={j}
-                            key={field}>
+                            key={field}
+                            ref={node => instance['_component_'+i+'_'+j] = node}>
                             {value}
                         </td>
                     );
@@ -716,6 +736,17 @@ class Table extends React.Component {
                         cellContent = value;
                         cells.push((<td className={classname} dangerouslySetInnerHTML={{__html: cellContent}} data-colid={colCount} key={key} />));
                     }
+                    else if (Object.itsa_isObject(value)) {
+                        return (
+                            <td
+                                className={classname}
+                                data-colid={j}
+                                key={field}
+                                ref={node => instance['_component_'+i+'_'+j] = node}>
+                                {value}
+                            </td>
+                        );
+                    }
                     else if (fullEditable || ((editable===true) && (state.editableRow===i) && (state.editableCol===colCount))) {
                         classname += EDITABLE_CELL_CLASS_SPACED;
                         (typeof value==='number') || value || (value='');
@@ -766,7 +797,7 @@ class Table extends React.Component {
                             cells.push((<td className={classname} dangerouslySetInnerHTML={{__html: cellContent}} data-colid={colCount} key={key} />));
                         }
                         else {
-                            cells.push((<td className={classname} data-colid={colCount} key={key}>{value}</td>));
+                            cells.push((<td className={classname} data-colid={colCount} key={key} ref={node => instance['_component_'+i+'_'+j] = node}>{value}</td>));
                         }
                     }
                 });
@@ -795,8 +826,8 @@ class Table extends React.Component {
     }
 
     refocus(e) {
-        let focusRow, focusCol, match, maxRow, maxCol, firstItem, item, editValue, colChangedByRow,
-            prevRowIndex, prevColIndex, field, editDirectionDown, arrowDown, arrowUp;
+        let focusRow, focusCol, match, maxRow, maxCol, firstItem, item, editValue, colChangedByRow, isSelectComponent, less,
+            prevRowIndex, prevColIndex, field, editDirectionDown, arrowDown, arrowUp, node, trNode, trParentNode, tds, trs;
         const instance = this,
             props = instance.props,
             state = instance.state,
@@ -825,12 +856,24 @@ class Table extends React.Component {
                 return;
             }
         }
+
         match = (
             (keyCode===9) ||
             (keyCode===13) ||
             (cursorNav && ((keyCode===40) || (keyCode===38))) ||
             (cursorNav && ctrlKey && ((keyCode===37) || (keyCode===39)))
         ); // 40=arrowDown, 38=arrowUp
+
+        // we need to ignore MOVING DOWN in case the focus lies on a button component
+        if ((document.activeElement.tagName==='BUTTON') && (keyCode===13)) {
+            match = false;
+        }
+
+        isSelectComponent = (document.activeElement.itsa_hasClass('itsa-select') || document.activeElement.itsa_inside('.itsa-select'));
+        if (isSelectComponent && ((keyCode===13) || (cursorNav && ((keyCode===38) || (keyCode===40))))) {
+            match = false;
+        }
+
         if (match) {
             e.preventDefault();
             arrowDown = (keyCode===40);
@@ -843,8 +886,34 @@ class Table extends React.Component {
                 firstItem = data[0];
                 maxCol = firstItem ? firstItem.itsa_size()-1 : 0;
             }
-            focusRow = prevRowIndex = state.editableRow;
-            focusCol = prevColIndex = state.editableCol;
+
+            if (isSelectComponent) {
+                // we need to catch editableRow and editableCol because thay are not set
+                less = 0;
+                if (props.removeableY) {
+                    less++;
+                }
+                if (props.extendableY==='full') {
+                    less++;
+                }
+
+                node = document.activeElement;
+                while (node && (node.tagName!=='TD')) {
+                    node = node.parentNode;
+                }
+                trNode = node.parentNode;
+                tds = trNode.childNodes;
+                prevColIndex = Array.prototype.indexOf.call(tds, node) - less;
+                trParentNode = trNode.parentNode;
+                trs = trParentNode.childNodes;
+                prevRowIndex = Array.prototype.indexOf.call(trs, trNode);
+            }
+            else {
+                prevRowIndex = state.editableRow;
+                prevColIndex = state.editableCol;
+            }
+            focusRow = prevRowIndex;
+            focusCol = prevColIndex;
 
             if (((keyCode===9) && shiftKey) || ((keyCode===37) && ctrlKey) || arrowUp) {
                 // backwards
@@ -926,19 +995,21 @@ class Table extends React.Component {
                 (focusRow>maxRow) && (focusRow=0);
             }
             item = props.data[focusRow];
-            editValue = hasColumns ? item[retrieveFieldName(columns[focusCol])] : item[retrieveFieldName(instance._columns[focusCol])];
-            this.setState({
-                editableRow: focusRow,
-                editableCol: focusCol,
-                editValue,
-                selectedRangeStart: {
-                    x: focusCol,
-                    y: focusRow
-                },
-                selectedRange: null
-            });
-            instance._focusActiveCell();
-            implementChanges();
+            if (item) {
+                editValue = hasColumns ? item[retrieveFieldName(columns[focusCol])] : item[retrieveFieldName(instance._columns[focusCol])];
+                this.setState({
+                    editableRow: focusRow,
+                    editableCol: focusCol,
+                    editValue,
+                    selectedRangeStart: {
+                        x: focusCol,
+                        y: focusRow
+                    },
+                    selectedRange: null
+                });
+                instance._focusActiveCell();
+                implementChanges();
+            }
         }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itsa-react-table",
-  "version": "16.7.1",
+  "version": "16.8.0",
   "description": "Editable React.js table",
   "author": [
     {