>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3635343. --> Reported by: [mandclu](https://www.drupal.org/user/52136) Related to !249 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Several problems make the Smart Date widget hard to use with a keyboard, especially the end time suggestions overlay:</p> <ol> <li>On 12-hour time inputs, typing <kbd>a</kbd> or <kbd>p</kbd> only sets AM/PM when the AM/PM part has focus. When the hour or minute part has focus, nothing happens.</li> <li>When the end time has focus and the overlay is open, the arrow keys can't get past the second suggestion. Pressing <kbd>Down</kbd> again goes back to the first one. This happens because the arrow key handler never calls <code>preventDefault()</code>, so the browser also steps the focused hour or minute. That changes the end time again and fires <code>change</code>, and <code>setDuration()</code> then rebuilds the list before the duration is updated.</li> <li>After a suggestion is clicked, the overlay appears again straight away. Clicking takes focus away from the end time, the code puts focus back, and the focus handler rebuilds the list. Pressing <kbd>Enter</kbd> on a highlighted suggestion doesn't close the overlay either.</li> <li>Once the overlay is closed, there's no way to reopen it from the keyboard without leaving the end time and coming back.</li> </ol> <p>Fixing these exposed an existing error in <code>smart_date_recur.js</code>. It attaches its <code>change</code> handlers to every Smart Date widget, so <code>durationToMinutes()</code> throws <code>TypeError: Cannot read properties of null (reading 'value')</code> on widgets that don't allow repeats.</p> <h3 id="summary-steps-reproduce">Steps to reproduce</h3> <ol> <li>Configure a Smart Date field to use the end time suggestions overlay and offer several durations.</li> <li>In a browser that shows times in 12-hour format, give the start time's hour part focus and press <kbd>p</kbd>. Nothing changes.</li> <li>Move focus to the end time and press <kbd>Down</kbd> a few times. The highlight goes back and forth between the first two suggestions.</li> <li>Click a suggestion. The overlay closes and immediately opens again.</li> <li>On a form with a Smart Date field that allows repeats and another that doesn't, change the end time on the field without repeats and watch the browser console for the error.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>On 12-hour time inputs, make <kbd>a</kbd> and <kbd>p</kbd> set AM/PM from any part of the time, and fire <code>input</code> and <code>change</code> so the end time and duration update.</li> <li>When the overlay is open, call <code>preventDefault()</code> on <kbd>Up</kbd> and <kbd>Down</kbd> so only the overlay handles them. Rebuild the list after the duration is updated in <code>setDuration()</code>, not before.</li> <li>Close the overlay after a suggestion is clicked or <kbd>Enter</kbd> is pressed on one, and keep it closed until the end time loses and regains focus. Pressing <kbd>Enter</kbd> on a suggestion shouldn't submit the form.</li> <li>When the end time has focus and the overlay is closed, make <kbd>Up</kbd> or <kbd>Down</kbd> reopen it without changing the time.</li> <li>In <code>smart_date_recur.js</code>, have <code>durationToMinutes()</code> return early when the widget has no recurrence elements.</li> </ul> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Review the MR.</li> <li>Test manually in Chrome, Firefox and Safari, with 12-hour and 24-hour locales.</li> <li>Consider a FunctionalJavascript test for the overlay's keyboard behavior.</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>Keyboard behavior only: AM/PM shortcuts from any part of a time, working arrow key navigation in the overlay, the overlay closing after a choice, and the arrow keys reopening it. Nothing changes visually.</p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p>