Merge pull request #961 from gagan2005/null_cell_edit

Display null while editing a null cell
mathesar-foundation · Jan 31, 2022 · defcd7a · defcd7a
2 parents c515d7b + 6e92684
commit defcd7a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/mathesar_ui/src/sections/table-view/row/Row.scss b/mathesar_ui/src/sections/table-view/row/Row.scss
@@ -174,6 +174,11 @@ section.table-section .tab-container .table-data .body {
           bottom: 2px;
           width: 100%;
         }
+
+        .is-null-displayed {
+          z-index: -1;
+          left: -4px;
+        }
       }
 
       &.new-row-help-cell {

diff --git a/mathesar_ui/src/sections/table-view/row/RowCell.svelte b/mathesar_ui/src/sections/table-view/row/RowCell.svelte
@@ -20,10 +20,12 @@
   export let row: TableRecord;
   export let column: Column;
   export let value: unknown = undefined;
+  let isNullDisplayed = false;
 
   $: ({ activeCell } = display);
   $: isActive = $activeCell && isCellActive($activeCell, row, column);
   $: isBeingEdited = $activeCell && isCellBeingEdited($activeCell, row, column);
+  $: isNullDisplayed = isBeingEdited && value === null;
 
   let cellRef: HTMLElement;
   let inputRef: HTMLInputElement;
@@ -66,6 +68,10 @@
     setValue(val);
   }
 
+  function hideNullElement() {
+    isNullDisplayed = false;
+  }
+
   async function handleKeyDown(event: KeyboardEvent) {
     const type = display.handleKeyEventsOnActiveCell(event.key);
     if (type) {
@@ -120,12 +126,14 @@
       bind:this={inputRef}
       type="text"
       class="edit-input-box"
+      class:is-null-displayed={isNullDisplayed}
       value={typeof value === 'string' || typeof value === 'number'
         ? value
         : ''}
       on:keydown={handleInputKeyDown}
       on:keyup={debounceAndSet}
       on:blur={onBlur}
+      on:input={hideNullElement}
     />
   {/if}