Fix auto-focus when async modal is opened

ref #49
xenharmonic-devs · Jun 15, 2024 · 6885227 · 6885227
1 parent 2485d43
commit 6885227
Show file tree

Hide file tree

Showing 38 changed files with 231 additions and 135 deletions.
diff --git a/src/components/ExporterButtons.vue b/src/components/ExporterButtons.vue
@@ -120,6 +120,7 @@ function doExport(exporter: ExporterKey) {
   <Teleport to="body">
     <KorgExportModal
       v-if="showKorgExportModal"
+      :show="showKorgExportModal"
       @confirm="showKorgExportModal = false"
       @cancel="showKorgExportModal = false"
       :newline="state.newline"
@@ -131,6 +132,7 @@ function doExport(exporter: ExporterKey) {
 
     <MtsSysexExportModal
       v-if="showMtsSysexExportModal"
+      :show="showMtsSysexExportModal"
       @confirm="showMtsSysexExportModal = false"
       @cancel="showMtsSysexExportModal = false"
       :newline="state.newline"
@@ -142,6 +144,7 @@ function doExport(exporter: ExporterKey) {
 
     <ReaperExportModal
       v-if="showReaperExportModal"
+      :show="showReaperExportModal"
       @confirm="showReaperExportModal = false"
       @cancel="showReaperExportModal = false"
       :newline="state.newline"

diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
@@ -71,7 +71,8 @@ watch(
         }
       })
     }
-  }
+  },
+  { immediate: true } // Needed to make async components work.
 )
 </script>
 

diff --git a/src/components/ModifyScale.vue b/src/components/ModifyScale.vue
@@ -185,46 +185,93 @@ defineExpose({ blur })
   <Teleport to="body">
     <ApproximateByHarmonicsModal
       v-if="showApproximateByHarmonicsModal"
+      :show="showApproximateByHarmonicsModal"
       @done="closeModals"
       @cancel="showApproximateByHarmonicsModal = false"
     />
     <ApproximateByRatiosModal
       v-if="showApproximateByRatiosModal"
+      :show="showApproximateByRatiosModal"
       @done="closeModals"
       @cancel="showApproximateByRatiosModal = false"
     />
     <ApproximateBySubharmonicsModal
       v-if="showApproximateBySubharmonicsModal"
+      :show="showApproximateBySubharmonicsModal"
       @done="closeModals"
       @cancel="showApproximateBySubharmonicsModal = false"
     />
     <CoalesceModal
       v-if="showCoalesceModal"
+      :show="showCoalesceModal"
       @done="closeModals"
       @cancel="showCoalesceModal = false"
     />
-    <ConvertModal v-if="showConvertModal" @done="closeModals" @cancel="showConvertModal = false" />
+    <ConvertModal
+      v-if="showConvertModal"
+      :show="showConvertModal"
+      @done="closeModals"
+      @cancel="showConvertModal = false"
+    />
     <EnumerateModal
       v-if="showEnumerateModal"
+      :show="showEnumerateModal"
       @done="closeModals"
       @cancel="showEnumerateModal = false"
     />
     <EqualizeModal
       v-if="showEqualizeModal"
+      :show="showEqualizeModal"
       @done="closeModals"
       @cancel="showEqualizeModal = false"
     />
-    <ExpandModal v-if="showExpandModal" @done="closeModals" @cancel="showExpandModal = false" />
+    <ExpandModal
+      v-if="showExpandModal"
+      :show="showExpandModal"
+      @done="closeModals"
+      @cancel="showExpandModal = false"
+    />
     <MergeOffsetsModal
       v-if="showMergeOffsetsModal"
+      :show="showMergeOffsetsModal"
       @done="closeModals"
       @cancel="showMergeOffsetsModal = false"
     />
-    <RandomModal v-if="showRandomModal" @done="closeModals" @cancel="showRandomModal = false" />
-    <RepeatModal v-if="showRepeatModal" @done="closeModals" @cancel="showRepeatModal = false" />
-    <RotateModal v-if="showRotateModal" @done="closeModals" @cancel="showRotateModal = false" />
-    <StretchModal v-if="showStretchModal" @done="closeModals" @cancel="showStretchModal = false" />
-    <SubsetModal v-if="showSubsetModal" @done="closeModals" @cancel="showSubsetModal = false" />
-    <TemperModal v-if="showTemperModal" @done="closeModals" @cancel="showTemperModal = false" />
+    <RandomModal
+      v-if="showRandomModal"
+      :show="showRandomModal"
+      @done="closeModals"
+      @cancel="showRandomModal = false"
+    />
+    <RepeatModal
+      v-if="showRepeatModal"
+      :show="showRepeatModal"
+      @done="closeModals"
+      @cancel="showRepeatModal = false"
+    />
+    <RotateModal
+      v-if="showRotateModal"
+      :show="showRotateModal"
+      @done="closeModals"
+      @cancel="showRotateModal = false"
+    />
+    <StretchModal
+      v-if="showStretchModal"
+      :show="showStretchModal"
+      @done="closeModals"
+      @cancel="showStretchModal = false"
+    />
+    <SubsetModal
+      v-if="showSubsetModal"
+      :show="showSubsetModal"
+      @done="closeModals"
+      @cancel="showSubsetModal = false"
+    />
+    <TemperModal
+      v-if="showTemperModal"
+      :show="showTemperModal"
+      @done="closeModals"
+      @cancel="showTemperModal = false"
+    />
   </Teleport>
 </template>
diff --git a/src/components/NewScale.vue b/src/components/NewScale.vue
@@ -168,50 +168,59 @@ defineExpose({ blur })
   />
 
   <Teleport to="body">
+    <!-- v-if is required to prevent premature asyncs while :show makes the focus watcher trigger -->
     <EnumerateModal
       v-if="showEnumerateModal"
+      :show="showEnumerateModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEnumerateModal = false"
     />
     <EqualTemperamentModal
       v-if="showEqualTemperamentModal"
+      :show="showEqualTemperamentModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEqualTemperamentModal = false"
     />
     <EulerGenusModal
       v-if="showEulerGenusModal"
+      :show="showEulerGenusModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showEulerGenusModal = false"
     />
     <GeneratorSequenceModal
       v-if="showGeneratorSequenceModal"
+      :show="showGeneratorSequenceModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showGeneratorSequenceModal = false"
     />
     <ConcordanceShellModal
       v-if="showConcordanceShellModal"
+      :show="showConcordanceShellModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showConcordanceShellModal = false"
     />
     <CpsModal
       v-if="showCpsModal"
+      :show="showCpsModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showCpsModal = false"
     />
     <HarmonicSeriesModal
       v-if="showHarmonicModal"
+      :show="showHarmonicModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showHarmonicModal = false"
     />
     <HistoricalModal
       v-if="showHistoricalModal"
+      :show="showHistoricalModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @update:baseFrequency="updateBaseFrequency"
@@ -220,18 +229,21 @@ defineExpose({ blur })
     />
     <LatticeModal
       v-if="showLatticeModal"
+      :show="showLatticeModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showLatticeModal = false"
     />
     <MosModal
       v-if="showMosModal"
+      :show="showMosModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showMosModal = false"
     />
     <PresetModal
       v-if="showPresetModal"
+      :show="showPresetModal"
       @update:scaleName="scale.name = $event"
       @update:baseFrequency="updateBaseFrequency"
       @update:baseMidiNote="scale.baseMidiNote = $event"
@@ -240,18 +252,21 @@ defineExpose({ blur })
     />
     <RankTwoModal
       v-if="showRankTwoModal"
+      :show="showRankTwoModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showRankTwoModal = false"
     />
     <StackModal
       v-if="showStackModal"
+      :show="showStackModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showStackModal = false"
     />
     <SubharmonicSeriesModal
       v-if="showSubharmonicModal"
+      :show="showSubharmonicModal"
       @update:scaleName="scale.name = $event"
       @update:source="updateSourceAndHideModals"
       @cancel="showSubharmonicModal = false"

diff --git a/src/components/modals/ShareUrl.vue b/src/components/modals/ShareUrl.vue
diff --git a/src/components/modals/export/KorgExport.vue b/src/components/modals/export/KorgExport.vue
@@ -8,6 +8,7 @@ import type { Interval } from 'sonic-weave'
 import type { Scale } from '@/scale'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -59,7 +60,7 @@ async function doExport() {
 </script>
 
 <template>
-  <Modal @cancel="$emit('cancel')">
+  <Modal :show="show" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export Korg Sound Librarian scale</h2>
     </template>

diff --git a/src/components/modals/export/MtsSysexExport.vue b/src/components/modals/export/MtsSysexExport.vue
@@ -9,6 +9,7 @@ import type { Scale } from '@/scale'
 import type { Interval } from 'sonic-weave'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -69,7 +70,7 @@ function doExport() {
 </script>
 
 <template>
-  <Modal @confirm="doExport" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="doExport" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export MTS Bulk Tuning Dump</h2>
     </template>

diff --git a/src/components/modals/export/ReaperExport.vue b/src/components/modals/export/ReaperExport.vue
@@ -8,6 +8,7 @@ import type { Scale } from '@/scale'
 import type { Interval } from 'sonic-weave'
 
 const props = defineProps<{
+  show: boolean
   newline: string
   midiOctaveOffset: number
   relativeIntervals: Interval[]
@@ -55,7 +56,7 @@ function doExport() {
 </script>
 
 <template>
-  <Modal @confirm="doExport" @cancel="$emit('cancel')">
+  <Modal :show="show" @confirm="doExport" @cancel="$emit('cancel')">
     <template #header>
       <h2>Export Reaper note name map</h2>
     </template>