fix: Sorting elements use updated focus handlers to not drag inputs. (#…

…226)

Uses upstream fix for sortable to not allow dragging when there is a form input in focus.

package.json

@@ -96,7 +96,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@blinkk/selective-edit": "^3.1.0",
+    "@blinkk/selective-edit": "^3.2.0",
     "@toast-ui/editor": "^3.0.2",
     "bent": "^7.3.12",
     "codemirror": "^5.62.2",

src/ts/editor/field/mediaList.ts

@@ -532,7 +532,7 @@ class MediaListFieldItem
         'selective__media_list__item--no-drag': this.listField.length <= 1,
         selective__sortable: true,
       })}
-      draggable=${canDrag ? 'true' : 'false'}
+      draggable=${canDrag && sortable.canDrag ? 'true' : 'false'}
       data-index=${index}
       @dragenter=${(evt: DragEvent) => {
         sortable.handleDragEnter(evt);
@@ -551,6 +551,14 @@ class MediaListFieldItem
         sortable.handleDrop(evt);
         droppable.handleDrop(evt);
       }}
+      @focusin=${(evt: FocusEvent) => {
+        sortable.handleFocusIn(evt);
+        this.listField.render();
+      }}
+      @focusout=${(evt: FocusEvent) => {
+        sortable.handleFocusOut(evt);
+        this.listField.render();
+      }}
     >
       <div
         class="selective__media_list__item__preview"
@@ -570,14 +578,25 @@ class MediaListFieldItem
     data: DeepObject,
     index: number
   ): TemplateResult {
+    const canDrag = this.listField.length > 1;
     const sortable = this.listField.sortableUi;
     return html` <div
       class="selective__media_list__item selective__media_list__item--expanded selective__sortable"
+      draggable=${canDrag && sortable.canDrag ? 'true' : 'false'}
       data-index=${index}
       @dragenter=${sortable.handleDragEnter.bind(sortable)}
       @dragleave=${sortable.handleDragLeave.bind(sortable)}
       @dragover=${sortable.handleDragOver.bind(sortable)}
+      @dragstart=${sortable.handleDragStart.bind(sortable)}
       @drop=${sortable.handleDrop.bind(sortable)}
+      @focusin=${(evt: FocusEvent) => {
+        sortable.handleFocusIn(evt);
+        this.listField.render();
+      }}
+      @focusout=${(evt: FocusEvent) => {
+        sortable.handleFocusOut(evt);
+        this.listField.render();
+      }}
     >
       <div
         class="selective__media_list__fields__header"

src/ts/editor/ui/parts/menu/site.ts

@@ -6,6 +6,7 @@ import {
   html,
 } from '@blinkk/selective-edit';
 import {DialogActionLevel, FormDialogModal} from '../../modal';
+import {EVENT_FILE_LOAD, EVENT_RENDER_COMPLETE} from '../../../events';
 import {
   IncludeExcludeFilter,
   IncludeExcludeFilterConfig,
@@ -18,7 +19,6 @@ import {
 import {MenuSectionPart, MenuSectionPartConfig} from './index';
 
 import {DataStorage} from '../../../../utility/dataStorage';
-import {EVENT_FILE_LOAD, EVENT_RENDER_COMPLETE} from '../../../events';
 import {RuleConfig} from '@blinkk/selective-edit/dist/selective/validationRules';
 import {StatePromiseKeys} from '../../../state';
 import {repeat} from '@blinkk/selective-edit';

yarn.lock

@@ -208,10 +208,10 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@blinkk/selective-edit@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@blinkk/selective-edit/-/selective-edit-3.1.0.tgz#6c8e52347db8e0c17d7fcc25c364cd34175a92b7"
-  integrity sha512-btUdFpjio592QsUYpBCPfwY+yy+7ASuTSVDNkekkFCa9EfoqCYlutBGknqsabWnJvTCRaemU1NuDhmYTGftiLQ==
+"@blinkk/selective-edit@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@blinkk/selective-edit/-/selective-edit-3.2.0.tgz#5f4c89053d4ba8aeabca924455c0bc44dd7a244b"
+  integrity sha512-xhljgOCSriIQSqBhzmM+MDYnG4JMiWWL/ztkFt7Zjx+WHnmXNniig3fiY534Kun30z12VaiReBiJqtKQaAu1Kw==
   dependencies:
     json-stable-stringify "^1.0.1"
     lit-html "^1.4.1"