Contrib.social

Disable Chosen module for hours/minute SelectList, since it breaks JS

Open on Drupal.org →
Created on 24 June 2024, about 1 year ago
Updated 31 July 2024, about 1 year ago

Problem/Motivation

This was already mentioned in 🐛 Unable to add, remove or copy timeslot Needs review but could benefit from having a dedicated issue.

When the Chosen → module is installed, it replaces the Hours dropdowns with fancy widgets which breaks the JS enhancements to copy / delete time slots.

This can be worked around by altering the widget, but maybe it is a good idea to fix it in the module.

Steps to reproduce

  1. Install the Chosen module and Chosen Library module
  2. In the Office Hours field settings, set the 'Time element type' value to SelectList, Time Notation to '24 hour' and Time Increment to '1 minute', to make sure Chosen is applied on all hours and minutes.
  3. Alternatively, in the Chosen module settings, limit the figures in the Chosen module to 5, to make sure it is always applied on Hour and Minute Select list.
  4. Edit a form with that uses the default or complex office_hours widget

Result: The Hours dropdown is replaced by a Chosen widget. JS functionality to delete a time slot or copy its values to the next slot no longer works as expected.

Time slot type:
- Regular time slots, Chosen is applied;
- Exception time slots, Chosen is not applied;
-- when pressing 'Add exception', a new exception day is added, a Chosen is applied to all exception slots(!).

JS-link type:
- add link works fine
- clear link clears only comment, not the (chosen) hour/time select lists
- copy link works essentially, but only copies comments.
- all_day checkmark does not work

Proposed resolution

1. Change the field settings, value 'Time element type' from SelectList to HTML5.
2. Add '#chosen' => FALSE to the hours and minute select lists.

Workaround:


/**
 * Implements hook_field_widget_single_element_WIDGET_TYPE_form_alter().
 *
 * Registers an after build callback to exclude office hours dropdowns from
 * chosen. Chosen alters the HTML structure of the dropdowns, which breaks the
 * JS enhancements of the office hours widget.
 */
function mymodule_field_widget_single_element_office_hours_default_form_alter(&$element, FormStateInterface $form_state, $context) {
  $element['office_hours'][0]['value']['#after_build'][] = 'mymodule_field_widget_single_element_office_hours_exclude_from_chosen';
}

/**
 * Implements hook_field_widget_single_element_WIDGET_TYPE_form_alter().
 */
function mymodule_field_widget_single_element_office_hours_exceptions_form_alter(&$element, FormStateInterface $form_state, $context) {
  mymodule_field_widget_single_element_office_hours_default_form_alter($element, $form_state, $context);
}

/**
 * Form after build callback to exclude office hours dropdowns from chosen.
 */
function mymodule_field_widget_single_element_office_hours_exclude_from_chosen($element) {
  foreach (Element::children($element) as $child_id) {
    foreach (['starthours', 'endhours'] as $hours_id) {
      $element[$child_id][$hours_id]['hour']['#chosen'] = FALSE;
      $element[$child_id][$hours_id]['minute']['#chosen'] = FALSE;
    }
  }
  return $element;
}

Remaining tasks

A pop-up with error appears after pressing 'Add exception'

🐛 Bug report
Status

Fixed

Version

1.17

Component

Code - widget

Created by

🇧🇬Bulgaria pfrenssen Sofia

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024