Select List item not working in Google Chrome

[marianciobanu63]

Hi team,
Starting with few weeks ago the select list items not working on Google Chrome and it's not open at the first pressing on the left mouse click, it's open on the second pressing on the left mouse click and not double click and i saw that it's open from first pressing on the right mouse click.
In IE 9 and 11 it's working, but i didn't find a solution for Google Chrome.
Can you help me with a suggestion?
I'm working with Apex 5.1
Thank you,
Marian

[vincentmorneau]

Can you provide an example? I am using it on many projects without select list issues.

[marianciobanu63]

Hi Vincent,
I tested on the demo application from version v0.12.2 for Apex 5.1.
I installed app-demo.sql from this version and after i go in the Patterns region -> Interactive Report -> i pressed on the pen for Employee Details and there i have a select list item with the name Deptno.
When i try to open that select list is not open on the first left mouse click and it's open at the second left mouse click(not double click), but it's working at the first right mouse click.
This behavior is only on Google Chrome and it happens in my application.

Thank you very much,
Marian

[marianciobanu63]

Hi Vincent,
Can you help me with a suggestion?
Thank you,
Marian

[vincentmorneau]

I'm sorry for the delay. I don't have access to a v0.12.2 for Apex 5.1 environment, so I will need a link to your app so I can tweak some css or js for you.

[marianciobanu63]

Hi Vincent,
You can try with this link: https://sodexoonline.bg/apex/f?p=12192:1::::::
Is your demo application for apex 5.1.
You can go in Patterns region -> Interactive Report -> and follow the steps from my previous comment "i pressed on the pen for Employee Details and there i have a select list item with the name Deptno.
When i try to open that select list is not open on the first left mouse click and it's open at the second left mouse click(not double click), but it's working at the first right mouse click.
This behavior is only on Google Chrome and it happens in my application."

Thank you,
Marian

[vincentmorneau]

This is the fix: https://github.com/Dogfalo/materialize/pull/6339/files#diff-338f03716a63d52eee0f79b4510d617c

You have to insert the above code in the appropriate place of your file: https://sodexoonline.bg/apex/interaktiv/r/12192/files/theme/500/v953/lib/materialize/js/materialize.min.js

[marianciobanu63]

Hi Vincent,

Thank you very much for your help.
I added your code in the next place, but is not working, maybe is not the right place where was added by me: 

"key: "_setupDropdown",
value: function _setupDropdown() {
var _this71 = this;

    this.wrapper = document.createElement('div');
    $(this.wrapper).addClass('select-wrapper ' + this.options.classes);
    this.$el.before($(this.wrapper));
    this.wrapper.appendChild(this.el);

    if (this.el.disabled) {
      this.wrapper.classList.add('disabled');
    }
	
    **this.wrapper.click(function (e) {
    e.stopPropagation(); });**
	
    // Create dropdown
    this.$selectOptions = this.$el.children('option, optgroup');
    this.dropdownOptions = document.createElement('ul');
    this.dropdownOptions.id = "select-options-" + M.guid();
    $(this.dropdownOptions).addClass('dropdown-content select-dropdown ' + (this.isMultiple ? 'multiple-select-dropdown' : ''));

    // Create dropdown structure.
    if (this.$selectOptions.length) {
      this.$selectOptions.each(function (el) {
        if ($(el).is('option')) {
          // Direct descendant option.
          var optionEl = void 0;
          if (_this71.isMultiple) {
            optionEl = _this71._appendOptionWithIcon(_this71.$el, el, 'multiple');
          } else {
            optionEl = _this71._appendOptionWithIcon(_this71.$el, el);
          }

          _this71._addOptionToValueDict(el, optionEl);
        } else if ($(el).is('optgroup')) {
          // Optgroup.
          var selectOptions = $(el).children('option');
          $(_this71.dropdownOptions).append($('<li class="optgroup"><span>' + el.getAttribute('label') + '</span></li>')[0]);

          selectOptions.each(function (el) {
            var optionEl = _this71._appendOptionWithIcon(_this71.$el, el, 'optgroup-option');
            _this71._addOptionToValueDict(el, optionEl);
          });
        }
      });
    }

    this.$el.after(this.dropdownOptions);

    // Add input dropdown
    this.input = document.createElement('input');
    $(this.input).addClass('select-dropdown dropdown-trigger');
    this.input.setAttribute('type', 'text');
    this.input.setAttribute('readonly', 'true');
    this.input.setAttribute('data-target', this.dropdownOptions.id);
    if (this.el.disabled) {
      $(this.input).prop('disabled', 'true');
    }

    this.$el.before(this.input);
    this._setValueToInput();

    // Add caret
    var dropdownIcon = $('<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    this.$el.before(dropdownIcon[0]);

    // Initialize dropdown
    if (!this.el.disabled) {
      var dropdownOptions = $.extend({}, this.options.dropdownOptions);

      // Add callback for centering selected option when dropdown content is scrollable
      dropdownOptions.onOpenEnd = function (el) {
        var selectedOption = $(_this71.dropdownOptions).find('.selected').first();

        if (selectedOption.length) {
          // Focus selected option in dropdown
          M.keyDown = true;
          _this71.dropdown.focusedIndex = selectedOption.index();
          _this71.dropdown._focusFocusedItem();
          M.keyDown = false;

          // Handle scrolling to selected option
          if (_this71.dropdown.isScrollable) {
            var scrollOffset = selectedOption[0].getBoundingClientRect().top - _this71.dropdownOptions.getBoundingClientRect().top; // scroll to selected option
            scrollOffset -= _this71.dropdownOptions.clientHeight / 2; // center in dropdown
            _this71.dropdownOptions.scrollTop = scrollOffset;
          }
        }
      };

      if (this.isMultiple) {
        dropdownOptions.closeOnClick = false;
      }
      this.dropdown = M.Dropdown.init(this.input, dropdownOptions);
    }

    // Add initial selections
    this._setSelectedStates();
  }"

Can you help me with a suggestion?

Thank you,
Marian