From 0db08498d9c1a38b02485ec987561dfdd53ea3dc Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 23 May 2024 17:44:23 +0100
Subject: [PATCH] Fix for grid arrow event handling when creating a column

---
 .../DataTable/modals/CreateEditColumn.svelte  | 479 +++++++++---------
 .../grid/overlays/KeyboardManager.svelte      |   1 +
 2 files changed, 242 insertions(+), 238 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 8583dbcab7..477ca1caa9 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -517,258 +517,261 @@
   })
 </script>
 
-<Layout noPadding gap="S">
-  {#if mounted}
-    <Input
-      value={editableColumn.name}
-      autofocus
-      on:input={e => {
-        if (
-          !uneditable &&
-          !(linkEditDisabled && editableColumn.type === LINK_TYPE)
-        ) {
-          editableColumn.name = e.target.value
-        }
-      }}
-      disabled={uneditable ||
-        (linkEditDisabled && editableColumn.type === LINK_TYPE)}
-      error={errors?.name}
-    />
-  {/if}
-  <Select
-    placeholder={null}
-    disabled={!typeEnabled}
-    bind:value={editableColumn.fieldId}
-    on:change={onHandleTypeChange}
-    options={allowedTypes}
-    getOptionLabel={field => field.name}
-    getOptionValue={field => field.fieldId}
-    getOptionIcon={field => field.icon}
-    isOptionEnabled={option => {
-      if (option.type === AUTO_TYPE) {
-        return availableAutoColumnKeys?.length > 0
-      }
-      return true
-    }}
-  />
-
-  {#if editableColumn.type === FieldType.STRING}
-    <Input
-      type="number"
-      label="Max Length"
-      bind:value={editableColumn.constraints.length.maximum}
-    />
-  {:else if editableColumn.type === FieldType.OPTIONS}
-    <OptionSelectDnD
-      bind:constraints={editableColumn.constraints}
-      bind:optionColors={editableColumn.optionColors}
-    />
-  {:else if editableColumn.type === FieldType.LONGFORM}
-    <div>
-      <div class="tooltip-alignment">
-        <Label size="M">Formatting</Label>
-        <AbsTooltip
-          position="top"
-          type="info"
-          text={"Rich text includes support for images, link"}
-        >
-          <Icon size="XS" name="InfoOutline" />
-        </AbsTooltip>
-      </div>
-
-      <Toggle
-        bind:value={editableColumn.useRichText}
-        text="Enable rich text support (markdown)"
+<span class="create-edit-column">
+  <Layout noPadding gap="S">
+    {#if mounted}
+      <Input
+        value={editableColumn.name}
+        autofocus
+        on:input={e => {
+          if (
+            !uneditable &&
+            !(linkEditDisabled && editableColumn.type === LINK_TYPE)
+          ) {
+            editableColumn.name = e.target.value
+          }
+        }}
+        disabled={uneditable ||
+          (linkEditDisabled && editableColumn.type === LINK_TYPE)}
+        error={errors?.name}
       />
-    </div>
-  {:else if editableColumn.type === FieldType.ARRAY}
-    <OptionSelectDnD
-      bind:constraints={editableColumn.constraints}
-      bind:optionColors={editableColumn.optionColors}
-    />
-  {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Earliest</Label>
-      </div>
-      <div class="input-length">
-        <DatePicker
-          bind:value={editableColumn.constraints.datetime.earliest}
-          enableTime={!editableColumn.dateOnly}
-          timeOnly={editableColumn.timeOnly}
-        />
-      </div>
-    </div>
-
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Latest</Label>
-      </div>
-      <div class="input-length">
-        <DatePicker
-          bind:value={editableColumn.constraints.datetime.latest}
-          enableTime={!editableColumn.dateOnly}
-          timeOnly={editableColumn.timeOnly}
-        />
-      </div>
-    </div>
-    {#if !editableColumn.timeOnly}
-      {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
-        <div>
-          <div class="row">
-            <Label>Time zones</Label>
-            <AbsTooltip
-              position="top"
-              type="info"
-              text={isCreating
-                ? null
-                : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
-            >
-              <Icon size="XS" name="InfoOutline" />
-            </AbsTooltip>
-          </div>
-          <Toggle
-            bind:value={editableColumn.ignoreTimezones}
-            text="Ignore time zones"
-          />
-        </div>
-      {/if}
-      <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
     {/if}
-  {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Min Value</Label>
-      </div>
-      <div class="input-length">
-        <Input
-          type="number"
-          bind:value={editableColumn.constraints.numericality
-            .greaterThanOrEqualTo}
-        />
-      </div>
-    </div>
-
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Max Value</Label>
-      </div>
-      <div class="input-length">
-        <Input
-          type="number"
-          bind:value={editableColumn.constraints.numericality.lessThanOrEqualTo}
-        />
-      </div>
-    </div>
-  {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
-    <RelationshipSelector
-      bind:relationshipPart1
-      bind:relationshipPart2
-      bind:relationshipTableIdPrimary
-      bind:relationshipTableIdSecondary
-      bind:editableColumn
-      {relationshipOpts1}
-      {relationshipOpts2}
-      {linkEditDisabled}
-      {tableOptions}
-      {errors}
+    <Select
+      placeholder={null}
+      disabled={!typeEnabled}
+      bind:value={editableColumn.fieldId}
+      on:change={onHandleTypeChange}
+      options={allowedTypes}
+      getOptionLabel={field => field.name}
+      getOptionValue={field => field.fieldId}
+      getOptionIcon={field => field.icon}
+      isOptionEnabled={option => {
+        if (option.type === AUTO_TYPE) {
+          return availableAutoColumnKeys?.length > 0
+        }
+        return true
+      }}
     />
-  {:else if editableColumn.type === FORMULA_TYPE}
-    {#if !table.sql}
+
+    {#if editableColumn.type === FieldType.STRING}
+      <Input
+        type="number"
+        label="Max Length"
+        bind:value={editableColumn.constraints.length.maximum}
+      />
+    {:else if editableColumn.type === FieldType.OPTIONS}
+      <OptionSelectDnD
+        bind:constraints={editableColumn.constraints}
+        bind:optionColors={editableColumn.optionColors}
+      />
+    {:else if editableColumn.type === FieldType.LONGFORM}
+      <div>
+        <div class="tooltip-alignment">
+          <Label size="M">Formatting</Label>
+          <AbsTooltip
+            position="top"
+            type="info"
+            text={"Rich text includes support for images, link"}
+          >
+            <Icon size="XS" name="InfoOutline" />
+          </AbsTooltip>
+        </div>
+
+        <Toggle
+          bind:value={editableColumn.useRichText}
+          text="Enable rich text support (markdown)"
+        />
+      </div>
+    {:else if editableColumn.type === FieldType.ARRAY}
+      <OptionSelectDnD
+        bind:constraints={editableColumn.constraints}
+        bind:optionColors={editableColumn.optionColors}
+      />
+    {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
       <div class="split-label">
         <div class="label-length">
-          <Label size="M">Formula Type</Label>
+          <Label size="M">Earliest</Label>
         </div>
         <div class="input-length">
-          <Select
-            bind:value={editableColumn.formulaType}
-            options={[
-              { label: "Dynamic", value: "dynamic" },
-              { label: "Static", value: "static" },
-            ]}
-            disabled={!isCreating}
-            getOptionLabel={option => option.label}
-            getOptionValue={option => option.value}
-            tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
-         while static formula are calculated when the row is saved."
+          <DatePicker
+            bind:value={editableColumn.constraints.datetime.earliest}
+            enableTime={!editableColumn.dateOnly}
+            timeOnly={editableColumn.timeOnly}
           />
         </div>
       </div>
-    {/if}
-    <div class="split-label">
-      <div class="label-length">
-        <Label size="M">Formula</Label>
-      </div>
-      <div class="input-length">
-        <ModalBindableInput
-          panel={ServerBindingPanel}
-          title="Formula"
-          value={editableColumn.formula}
-          on:change={e => {
-            editableColumn = {
-              ...editableColumn,
-              formula: e.detail,
-            }
-          }}
-          bindings={getBindings({ table })}
-          allowJS
-          context={rowGoldenSample}
-        />
-      </div>
-    </div>
-  {:else if editableColumn.type === JSON_TYPE}
-    <Button primary text on:click={openJsonSchemaEditor}
-      >Open schema editor</Button
-    >
-  {/if}
-  {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
-    <Select
-      label="Auto column type"
-      value={editableColumn.subtype}
-      on:change={e => (editableColumn.subtype = e.detail)}
-      options={Object.entries(autoColumnOptions)}
-      getOptionLabel={option => option[1].name}
-      getOptionValue={option => option[0]}
-      disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
-      error={errors?.subtype}
-    />
-  {/if}
 
-  {#if canBeRequired || canBeDisplay}
-    <div>
-      {#if canBeRequired}
-        <Toggle
-          value={required}
-          on:change={onChangeRequired}
-          disabled={primaryDisplay}
-          thin
-          text="Required"
-        />
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Latest</Label>
+        </div>
+        <div class="input-length">
+          <DatePicker
+            bind:value={editableColumn.constraints.datetime.latest}
+            enableTime={!editableColumn.dateOnly}
+            timeOnly={editableColumn.timeOnly}
+          />
+        </div>
+      </div>
+      {#if !editableColumn.timeOnly}
+        {#if datasource?.source !== SourceName.ORACLE && datasource?.source !== SourceName.SQL_SERVER && !editableColumn.dateOnly}
+          <div>
+            <div class="row">
+              <Label>Time zones</Label>
+              <AbsTooltip
+                position="top"
+                type="info"
+                text={isCreating
+                  ? null
+                  : "We recommend not changing how timezones are handled for existing columns, as existing data will not be updated"}
+              >
+                <Icon size="XS" name="InfoOutline" />
+              </AbsTooltip>
+            </div>
+            <Toggle
+              bind:value={editableColumn.ignoreTimezones}
+              text="Ignore time zones"
+            />
+          </div>
+        {/if}
+        <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
       {/if}
-    </div>
-  {/if}
-</Layout>
-
-<div class="action-buttons">
-  {#if !uneditable && originalName != null}
-    <Button quiet warning text on:click={confirmDelete}>Delete</Button>
-  {/if}
-  <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
-  <Button
-    disabled={invalid || savingColumn}
-    newStyles
-    cta
-    on:click={saveColumn}
-  >
-    {#if savingColumn}
-      <div class="save-loading">
-        <ProgressCircle overBackground={true} size="S" />
+    {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Min Value</Label>
+        </div>
+        <div class="input-length">
+          <Input
+            type="number"
+            bind:value={editableColumn.constraints.numericality
+              .greaterThanOrEqualTo}
+          />
+        </div>
       </div>
-    {:else}
-      Save
+
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Max Value</Label>
+        </div>
+        <div class="input-length">
+          <Input
+            type="number"
+            bind:value={editableColumn.constraints.numericality
+              .lessThanOrEqualTo}
+          />
+        </div>
+      </div>
+    {:else if editableColumn.type === FieldType.LINK && !editableColumn.autocolumn}
+      <RelationshipSelector
+        bind:relationshipPart1
+        bind:relationshipPart2
+        bind:relationshipTableIdPrimary
+        bind:relationshipTableIdSecondary
+        bind:editableColumn
+        {relationshipOpts1}
+        {relationshipOpts2}
+        {linkEditDisabled}
+        {tableOptions}
+        {errors}
+      />
+    {:else if editableColumn.type === FORMULA_TYPE}
+      {#if !table.sql}
+        <div class="split-label">
+          <div class="label-length">
+            <Label size="M">Formula Type</Label>
+          </div>
+          <div class="input-length">
+            <Select
+              bind:value={editableColumn.formulaType}
+              options={[
+                { label: "Dynamic", value: "dynamic" },
+                { label: "Static", value: "static" },
+              ]}
+              disabled={!isCreating}
+              getOptionLabel={option => option.label}
+              getOptionValue={option => option.value}
+              tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered or sorted by,
+         while static formula are calculated when the row is saved."
+            />
+          </div>
+        </div>
+      {/if}
+      <div class="split-label">
+        <div class="label-length">
+          <Label size="M">Formula</Label>
+        </div>
+        <div class="input-length">
+          <ModalBindableInput
+            panel={ServerBindingPanel}
+            title="Formula"
+            value={editableColumn.formula}
+            on:change={e => {
+              editableColumn = {
+                ...editableColumn,
+                formula: e.detail,
+              }
+            }}
+            bindings={getBindings({ table })}
+            allowJS
+            context={rowGoldenSample}
+          />
+        </div>
+      </div>
+    {:else if editableColumn.type === JSON_TYPE}
+      <Button primary text on:click={openJsonSchemaEditor}
+        >Open schema editor</Button
+      >
     {/if}
-  </Button>
-</div>
+    {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
+      <Select
+        label="Auto column type"
+        value={editableColumn.subtype}
+        on:change={e => (editableColumn.subtype = e.detail)}
+        options={Object.entries(autoColumnOptions)}
+        getOptionLabel={option => option[1].name}
+        getOptionValue={option => option[0]}
+        disabled={!availableAutoColumnKeys?.length || editableColumn.autocolumn}
+        error={errors?.subtype}
+      />
+    {/if}
+
+    {#if canBeRequired || canBeDisplay}
+      <div>
+        {#if canBeRequired}
+          <Toggle
+            value={required}
+            on:change={onChangeRequired}
+            disabled={primaryDisplay}
+            thin
+            text="Required"
+          />
+        {/if}
+      </div>
+    {/if}
+  </Layout>
+
+  <div class="action-buttons">
+    {#if !uneditable && originalName != null}
+      <Button quiet warning text on:click={confirmDelete}>Delete</Button>
+    {/if}
+    <Button secondary newStyles on:click={cancelEdit}>Cancel</Button>
+    <Button
+      disabled={invalid || savingColumn}
+      newStyles
+      cta
+      on:click={saveColumn}
+    >
+      {#if savingColumn}
+        <div class="save-loading">
+          <ProgressCircle overBackground={true} size="S" />
+        </div>
+      {:else}
+        Save
+      {/if}
+    </Button>
+  </div>
+</span>
 <Modal bind:this={jsonSchemaModal}>
   <JSONSchemaModal
     schema={editableColumn.schema}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index 78cb186f29..62a2b2f830 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -24,6 +24,7 @@
     ".date-time-popover",
     "#builder-side-panel-container",
     "[data-grid-ignore]",
+    ".create-edit-column",
   ]
 
   // Global key listener which intercepts all key events