From 5123f4616ca579e4a07d0d07758d0374e5b6e32f Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Mon, 16 Oct 2023 16:26:25 +0200
Subject: [PATCH] :children_crossing: [#437] Implement cursor start/end on
 Home/End keypress

Solution taken from react-select issue/discussion.

There is some ambiguity on what the behaviour should be on MacOS, but
due to lack of appropriate device we're leaving that as it is, for
now.
---
 .../forms/SelectField/SelectField.js          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/forms/SelectField/SelectField.js b/src/components/forms/SelectField/SelectField.js
index 51730478c..164f05e29 100644
--- a/src/components/forms/SelectField/SelectField.js
+++ b/src/components/forms/SelectField/SelectField.js
@@ -55,6 +55,25 @@ const SelectField = ({
     [autoSelectOnlyOption, isSingle, value, JSON.stringify(options), setValue, valueProperty]
   );
 
+  // Taken from snippet posted in react-select issue:
+  // https://github.com/JedWatson/react-select/issues/3562#issuecomment-518841754
+  const handleKeyDown = evt => {
+    switch (evt.key) {
+      case 'Home':
+        evt.preventDefault();
+        if (evt.shiftKey) evt.target.selectionStart = 0;
+        else evt.target.setSelectionRange(0, 0);
+        break;
+      case 'End':
+        evt.preventDefault();
+        const len = evt.target.value.length;
+        if (evt.shiftKey) evt.target.selectionEnd = len;
+        else evt.target.setSelectionRange(len, len);
+        break;
+      // no default
+    }
+  };
+
   return (
     <Wrapper>
       <FormField invalid={invalid} className="utrecht-form-field--openforms">
@@ -105,6 +124,7 @@ const SelectField = ({
               defaultMessage="No results found"
             />
           )}
+          onKeyDown={handleKeyDown}
           {...props}
           onChange={newValue => {
             const isSingle = !Array.isArray(newValue);