feat: first field now autofocus when editing a row

fix: move the focus to the first editable element

fix: make the Autocomplete options popup on autoFocus

feat: allow saving on table only when changes occurred

fix: compare only the editing row instead of the entire list to decide
if the save method will be called

new-lamassu-admin/src/components/editableTable/Row.js

@@ -83,7 +83,13 @@ const ActionCol = ({ disabled, editing }) => {
   )
 }
 
-const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
+const ECol = ({
+  editing,
+  focus,
+  config,
+  extraPaddingRight,
+  extraPaddingLeft
+}) => {
   const {
     name,
     input,
@@ -102,6 +108,7 @@ const ECol = ({ editing, config, extraPaddingRight, extraPaddingLeft }) => {
 
   const innerProps = {
     fullWidth: true,
+    autoFocus: focus,
     size,
     bold,
     textAlign,
@@ -176,6 +183,10 @@ const ERow = ({ editing, disabled }) => {
     ? R.indexOf(toSHeader[toSHeader.length - 1], elements)
     : -1
 
+  const elementToFocusIndex = innerElements.findIndex(
+    it => it.editable === undefined || it.editable
+  )
+
   return (
     <Tr
       size={rowSize}
@@ -187,6 +198,7 @@ const ERow = ({ editing, disabled }) => {
             key={idx}
             config={it}
             editing={editing}
+            focus={idx === elementToFocusIndex && editing}
             extraPaddingRight={extraPaddingRightIndex === idx}
             extraPaddingLeft={extraPaddingLeftIndex === idx}
           />

new-lamassu-admin/src/components/editableTable/Table.js

@@ -57,9 +57,12 @@ const ETable = ({
     const index = R.findIndex(R.propEq('id', it.id))(data)
     const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
 
+    if (!R.equals(data[index], it)) {
       // no response means the save failed
       const response = await save({ [name]: list }, it)
       if (!response) return
+    }
+
     setAdding(false)
     setEditingId(null)
   }

new-lamassu-admin/src/components/inputs/base/Autocomplete.js

@@ -84,6 +84,7 @@ const Autocomplete = ({
             size={size}
             fullWidth={fullWidth}
             textAlign={textAlign}
+            {...props}
           />
         )
       }}