Contrib.social

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

Open on Drupal.org →
Created on 24 June 2024, 6 months ago
Updated 31 July 2024, 5 months 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

  • Issue created by @pfrenssen
  • Merge request !40Prevent Chosen from breaking our JS enhancements. → (Open) created by pfrenssen
  • Status changed to Needs review 6 months ago
  • Comment 6 months ago →
    🇧🇬Bulgaria pfrenssen Sofia
  • Pipeline finished with Failed
    6 months ago
    Total: 149s
    #206630
  • Comment 6 months ago →
    🇳🇱Netherlands johnv

    I am sorry, I cannot replicate.
    - enable office_hours, chosen modules
    - add office_hours field with select list dropdown, for 24 hours notation and 60*1 minute notation.
    - add 'List (integer)' field with some values
    - customize /admin/config/user-interface/chosen to fall outside boundaries.
    - edit node.

    Only when explicitly adding the 'Chosen' widget (from Chosen Field module), I get the chosen widget.

  • Status changed to Needs work 6 months ago
  • Comment 6 months ago →
    🇳🇱Netherlands johnv
  • Comment 5 months ago →
    🇳🇱Netherlands johnv

    After uninstalling, and again installing the Chosen + Chosen Library modules, I do can replicate the problem.
    P.S. a work-around is to change the field settings, value 'Time element type' from SelectList to HTML5.

    I added this line and tested again: 

      public static function processDatelist(&$element, FormStateInterface $form_state, &$complete_form) {
    $element = parent::processDatelist($element, $form_state, $complete_form);
   ...
+    // Make sure contrib module 'chosen' is not applied. It breaks JS.
+    $element['hour']['#chosen'] = FALSE;
+    $element['minute']['#chosen'] = FALSE;

    return $element;
  }

    This solves the problem, but still generates the pop-up problem.
    I updated the issue summary, and included 'minute' to the initial proposed solution.

  • Comment 5 months ago →
    🇳🇱Netherlands johnv
  • Comment 5 months ago →
    🇳🇱Netherlands johnv
  • Comment 5 months ago →
    🇳🇱Netherlands johnv
  • Comment 5 months ago →
    🇳🇱Netherlands johnv

    Taking the solution from OP, the code is incorporated in the workflow's module.
    As of now, the Chosen module is not applicable to Office Hours.

  • Comment 5 months ago →
    System Message
    • johnv → committed 4b1121dd on 8.x-1.x 
      Issue #3456655: Disable Chosen module for hours/minute SelectList, since...
  • Status changed to Fixed 5 months ago
  • Comment 5 months ago →
    🇳🇱Netherlands johnv
  • Comment 5 months ago →
    System Message

    Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024