Refactor EditableField and FadeText

packages/frontend/app/components/competency-title-editor.gjs

@@ -11,6 +11,7 @@ import { on } from '@ember/modifier';
 import pick from 'ilios-common/helpers/pick';
 import set from 'ember-set-helper/helpers/set';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class CompetencyTitleEditorComponent extends Component {
   @tracked title;
@@ -45,10 +46,8 @@ export default class CompetencyTitleEditorComponent extends Component {
           @value={{this.title}}
           @save={{perform this.save}}
           @close={{this.revert}}
-          @saveOnEnter={{true}}
           data-test-title
-          @closeOnEscape={{true}}
-          as |isSaving|
+          as |keyboard isSaving|
         >
           <input
             type="text"
@@ -57,6 +56,8 @@ export default class CompetencyTitleEditorComponent extends Component {
             aria-label={{t "general.title"}}
             {{on "input" (pick "target.value" (set this "title"))}}
             {{this.validations.attach "title"}}
+            {{keyboard}}
+            {{focus}}
           />
         </EditableField>
         <YupValidationMessage

packages/frontend/app/components/curriculum-inventory/report-header.gjs

@@ -13,6 +13,7 @@ import set from 'ember-set-helper/helpers/set';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
 import FaIcon from 'ilios-common/components/fa-icon';
 import not from 'ember-truth-helpers/helpers/not';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class CurriculumInventoryReportHeaderComponent extends Component {
   @tracked name;
@@ -55,9 +56,7 @@ export default class CurriculumInventoryReportHeaderComponent extends Component
             @value={{if this.name this.name (t "general.clickToEdit")}}
             @save={{perform this.saveName}}
             @close={{this.revertNameChanges}}
-            @saveOnEnter={{true}}
-            @closeOnEscape={{true}}
-            as |isSaving|
+            as |keyboard isSaving|
           >
             <input
               aria-label={{t "general.title"}}
@@ -66,6 +65,8 @@ export default class CurriculumInventoryReportHeaderComponent extends Component
               disabled={{isSaving}}
               {{on "input" (pick "target.value" (set this "name"))}}
               {{this.validations.attach "name"}}
+              {{keyboard}}
+              {{focus}}
             />
             <YupValidationMessage
               @description={{t "general.name"}}

packages/frontend/app/components/curriculum-inventory/report-overview.gjs

@@ -22,6 +22,7 @@ import and from 'ember-truth-helpers/helpers/and';
 import not from 'ember-truth-helpers/helpers/not';
 import pick from 'ilios-common/helpers/pick';
 import eq from 'ember-truth-helpers/helpers/eq';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class CurriculumInventoryReportOverviewComponent extends Component {
   @service currentUser;
@@ -284,6 +285,7 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
                   <DatePicker
                     @value={{this.startDate}}
                     @onChange={{set this "startDate"}}
+                    @autofocus={{true}}
                     {{this.validations.attach "startDate"}}
                     data-test-start-date-picker
                   />
@@ -312,6 +314,7 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
                   <DatePicker
                     @value={{this.endDate}}
                     @onChange={{set this "endDate"}}
+                    @autofocus={{true}}
                     {{this.validations.attach "endDate"}}
                     data-test-end-date-picker
                   />
@@ -340,6 +343,7 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
                   <select
                     id="year-{{templateId}}"
                     {{on "change" (pick "target.value" (set this "year"))}}
+                    {{focus}}
                   >
                     {{#each this.yearOptions as |obj|}}
                       <option
@@ -378,8 +382,7 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
                   @save={{perform this.changeDescription}}
                   @close={{this.revertDescriptionChanges}}
                   @clickPrompt={{if this.description this.description (t "general.clickToEdit")}}
-                  @closeOnEscape={{true}}
-                  as |isSaving|
+                  as |keyboard isSaving|
                 >
                   <textarea
                     id="description-{{templateId}}"
@@ -388,6 +391,8 @@ export default class CurriculumInventoryReportOverviewComponent extends Componen
                     {{on "input" (pick "target.value" (set this "description"))}}
                     {{this.validations.attach "description"}}
                     placeholder={{t "general.reportDescriptionPlaceholder"}}
+                    {{keyboard saveOnEnter=false}}
+                    {{focus}}
                   >
                     {{this.description}}
                   </textarea>

packages/frontend/app/components/curriculum-inventory/sequence-block-header.gjs

@@ -13,6 +13,7 @@ import pick from 'ilios-common/helpers/pick';
 import set from 'ember-set-helper/helpers/set';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
 import FaIcon from 'ilios-common/components/fa-icon';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class CurriculumInventorySequenceBlockHeaderComponent extends Component {
   @service store;
@@ -55,9 +56,7 @@ export default class CurriculumInventorySequenceBlockHeaderComponent extends Com
             @value={{this.title}}
             @save={{perform this.changeTitle}}
             @close={{this.revertTitleChanges}}
-            @saveOnEnter={{true}}
-            @closeOnEscape={{true}}
-            as |isSaving|
+            as |keyboard isSaving|
           >
             <input
               aria-label={{t "general.title"}}
@@ -66,6 +65,8 @@ export default class CurriculumInventorySequenceBlockHeaderComponent extends Com
               disabled={{isSaving}}
               {{on "input" (pick "target.value" (set this "titleBuffer"))}}
               {{this.validations.attach "title"}}
+              {{keyboard}}
+              {{focus}}
             />
             <YupValidationMessage
               @description={{t "general.title"}}

packages/frontend/app/components/curriculum-inventory/sequence-block-overview.gjs

@@ -30,6 +30,7 @@ import and from 'ember-truth-helpers/helpers/and';
 import not from 'ember-truth-helpers/helpers/not';
 import SequenceBlockSessionManager from 'frontend/components/curriculum-inventory/sequence-block-session-manager';
 import SequenceBlockSessionList from 'frontend/components/curriculum-inventory/sequence-block-session-list';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class CurriculumInventorySequenceBlockOverviewComponent extends Component {
   @service intl;
@@ -672,7 +673,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                     @close={{this.revertCourseChanges}}
                     @clickPrompt={{t "general.selectCourse"}}
                   >
-                    <select id="course-{{templateId}}" {{on "change" this.updateCourse}}>
+                    <select id="course-{{templateId}}" {{on "change" this.updateCourse}} {{focus}}>
                       <option value selected={{isEmpty this.course}}>{{t
                           "general.selectCourse"
                         }}</option>
@@ -745,14 +746,15 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                   }}
                   @save={{perform this.saveDescription}}
                   @close={{this.revertDescriptionChanges}}
-                  @closeOnEscape={{true}}
-                  as |isSaving|
+                  as |keyboard isSaving|
                 >
                   <textarea
                     id="description-{{templateId}}"
                     value={{this.description}}
                     oninput={{this.changeDescription}}
                     disabled={{isSaving}}
+                    {{keyboard saveOnEnter=false}}
+                    {{focus}}
                   >
                     {{this.description}}
                   </textarea>
@@ -772,6 +774,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                   <select
                     id="required-{{templateId}}"
                     {{on "change" (pick "target.value" this.setRequired)}}
+                    {{focus}}
                   >
                     <option value="1" selected={{eq this.required "1"}}>{{t
                         "general.required"
@@ -987,6 +990,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                   <select
                     id="child-sequence-order-{{templateId}}"
                     {{on "change" (pick "target.value" (set this "childSequenceOrder"))}}
+                    {{focus}}
                   >
                     <option value="1" selected={{eq this.childSequenceOrder "1"}}>{{t
                         "general.ordered"
@@ -1016,6 +1020,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                       <select
                         id="order-in-sequence-{{templateId}}"
                         {{on "change" this.updateOrderInSequence}}
+                        {{focus}}
                       >
                         {{#each this.orderInSequenceOptions as |val|}}
                           <option
@@ -1047,6 +1052,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                     id="starting-academic-level-{{templateId}}"
                     {{on "change" this.setStartLevel}}
                     {{this.validations.attach "startLevel"}}
+                    {{focus}}
                   >
                     {{#each (sortBy "level" this.academicLevels) as |obj|}}
                       <option
@@ -1077,6 +1083,7 @@ export default class CurriculumInventorySequenceBlockOverviewComponent extends C
                     id="ending-academic-level-{{templateId}}"
                     {{on "change" this.setEndLevel}}
                     {{this.validations.attach "endLevel"}}
+                    {{focus}}
                   >
                     {{#each (sortBy "level" this.academicLevels) as |obj|}}
                       <option

packages/frontend/app/components/instructor-group/header.gjs

@@ -14,6 +14,7 @@ import set from 'ember-set-helper/helpers/set';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
 import { LinkTo } from '@ember/routing';
 import { hash } from '@ember/helper';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class InstructorGroupHeaderComponent extends Component {
   @service store;
@@ -55,9 +56,7 @@ export default class InstructorGroupHeaderComponent extends Component {
               @value={{this.title}}
               @save={{perform this.changeTitle}}
               @close={{this.revertTitleChanges}}
-              @saveOnEnter={{true}}
-              @closeOnEscape={{true}}
-              as |isSaving|
+              as |keyboard isSaving|
             >
               <input
                 aria-label={{t "general.instructorGroupTitle"}}
@@ -66,6 +65,8 @@ export default class InstructorGroupHeaderComponent extends Component {
                 disabled={{isSaving}}
                 {{on "input" (pick "target.value" (set this "title"))}}
                 {{this.validations.attach "title"}}
+                {{keyboard}}
+                {{focus}}
               />
               <YupValidationMessage
                 @description={{t "general.title"}}

packages/frontend/app/components/learner-group/header.gjs

@@ -15,6 +15,7 @@ import reverse from 'ilios-common/helpers/reverse';
 import YupValidations from 'ilios-common/classes/yup-validations';
 import YupValidationMessage from 'ilios-common/components/yup-validation-message';
 import { string } from 'yup';
+import focus from 'ilios-common/modifiers/focus';
 
 export default class LearnerGroupHeaderComponent extends Component {
   @tracked titleBuffer;
@@ -90,9 +91,7 @@ export default class LearnerGroupHeaderComponent extends Component {
               @value={{if @learnerGroup.title @learnerGroup.title (t "general.clickToEdit")}}
               @save={{perform this.changeTitle}}
               @close={{this.revertTitleChanges}}
-              @saveOnEnter={{true}}
-              @closeOnEscape={{true}}
-              as |isSaving|
+              as |keyboard isSaving|
             >
               <input
                 aria-label={{t "general.learnerGroupTitle"}}
@@ -101,6 +100,8 @@ export default class LearnerGroupHeaderComponent extends Component {
                 disabled={{isSaving}}
                 {{on "input" (pick "target.value" (set this "titleBuffer"))}}
                 {{this.validations.attach "title"}}
+                {{keyboard}}
+                {{focus}}
               />
               <YupValidationMessage
                 @description={{t "general.title"}}

packages/frontend/app/components/learner-group/root.gjs

@@ -45,6 +45,8 @@ import YupValidationMessage from 'ilios-common/components/yup-validation-message
 import { string } from 'yup';
 import { pageTitle } from 'ember-page-title';
 import reverse from 'ilios-common/helpers/reverse';
+import focus from 'ilios-common/modifiers/focus';
+
 const DEFAULT_URL_VALUE = 'https://';
 
 export default class LearnerGroupRootComponent extends Component {
@@ -521,16 +523,16 @@ export default class LearnerGroupRootComponent extends Component {
                   }}
                   @save={{perform this.changeLocation}}
                   @close={{this.revertLocationChanges}}
-                  @saveOnEnter={{true}}
-                  @closeOnEscape={{true}}
-                  as |isSaving|
+                  as |keyboard isSaving|
                 >
                   <input
                     id="location-{{templateId}}"
                     type="text"
                     value={{this.location}}
                     disabled={{isSaving}}
                     {{on "input" (pick "target.value" (set this "locationBuffer"))}}
+                    {{keyboard}}
+                    {{focus}}
                   />
                 </EditableField>
               {{else if @learnerGroup.location}}
@@ -550,9 +552,7 @@ export default class LearnerGroupRootComponent extends Component {
                   @value={{if @learnerGroup.url @learnerGroup.url (t "general.clickToEdit")}}
                   @save={{perform this.saveUrlChanges}}
                   @close={{this.revertUrlChanges}}
-                  @saveOnEnter={{true}}
-                  @closeOnEscape={{true}}
-                  as |isSaving|
+                  as |keyboard isSaving|
                 >
                   {{! template-lint-disable no-bare-strings}}
                   <input
@@ -565,6 +565,8 @@ export default class LearnerGroupRootComponent extends Component {
                     {{on "input" (pick "target.value" this.changeUrl)}}
                     {{on "focus" this.selectAllText}}
                     {{this.validations.attach "bestUrl"}}
+                    {{keyboard}}
+                    {{focus}}
                   />
                   <YupValidationMessage
                     @description={{t "general.defaultVirtualLearningLink"}}