Fix arrow keys not working in Edit Runtime form inputs (#1643)

* Fix arrow keys not working in Edit Runtime form inputs

* Update changelog [skip ci]

CHANGES.md

@@ -10,6 +10,15 @@ creating a new release entry be sure to copy & paste the span tag with the
 `actions:bind` attribute, which is used by a regex to find the text to be
 updated. Only the first match gets replaced, so it's fine to leave the old
 ones in. -->
+-------------------------------------------------------------------------------
+## __cylc-ui-2.4.0 (<span actions:bind='release-date'>Upcoming</span>)__
+
+### Fixes
+
+[#1643](https://github.com/cylc/cylc-ui/pull/1643) -
+Fix bug where the up/down/home/end keys would not work inside the Edit Runtime
+form inputs.
+
 -------------------------------------------------------------------------------
 ## __cylc-ui-2.3.0 (<span actions:bind='release-date'>Released 2023-11-28</span>)__
 

src/components/graphqlFormGenerator/EditRuntimeForm.vue

@@ -38,25 +38,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-else
       v-model="isValid"
       ref="form"
-      class="c-edit-runtime-form"
+      class="c-edit-runtime-form ma-4"
     >
-      <v-list>
-        <v-list-item
-          v-for="key in Object.keys(model)"
-          :key="key"
-        >
-          <v-list-item-title class="c-input-label">
-            <!-- input label - the display title for this input -->
-            {{ startCase(key) }}
-          </v-list-item-title>
-          <component
-            :is="getInputProps(key).is"
-            v-bind="getInputProps(key)"
-            v-model="model[key]"
-            :types="types"
-          />
-        </v-list-item>
-      </v-list>
+      <div
+        v-for="key in Object.keys(model)"
+        :key="key"
+      >
+        <v-list-item-title class="c-input-label">
+          <!-- input label - the display title for this input -->
+          {{ startCase(key) }}
+        </v-list-item-title>
+        <component
+          :is="getInputProps(key).is"
+          v-bind="getInputProps(key)"
+          v-model="model[key]"
+          :types="types"
+        />
+      </div>
     </v-form>
   </div>
 </template>