Обновление Chrome 73 - материализация ошибки запуска JS CSS

После последнего обновления Chrome 73 средства выбора даты, времени и раскрывающиеся списки для Materialise CSS 0.100.2 больше не работают, они мерцают при нажатии и исчезают.

Есть идеи, как это исправить?

ОТВЕТЫ

Ответ 1

Подробное обсуждение этой темы продолжается https://github.com/amsul/pickadate.js/issues/1138.

В качестве временного исправления у меня есть следующие изменения enter image description here

enter image description here

enter image description here

Ответ 2

Я была такая же проблема. На данный момент я внес некоторые изменения, чтобы он работал (для меня это просто временное исправление).

На материалеize.js (материализация-v0.100.2 не минимальная):

1) В строке 1786 есть setTimeout (с комментарием "Добавить обработчик щелчка закрытия к документу"), значение ожидания которого равно 0, измените его на 100.

2) В строке 6558 есть привязка к щелчку вне элемента datepicker. (с комментарием "Привязать события документа".) Поместите всю эту привязку в setTimeout со временем ожидания 500 мс.

Фикс 1 предназначен для выбора, второй - для выбора даты.

Ответ 4

комментатор временного прохождения по материалам .js

/** Hide when clicking or tabbing on any element except the clock and input
    $doc.on('click.clockpicker.' + this.id + ' focusin.clockpicker.' + this.id, function (e) {
      var target = $(e.target);
      if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0) {
        self.hide();
      }
    });*/

Ответ 5

Я нашел исправление для этого в Chrome, вы просто должны использовать этот пример: $ ("# dtFrom"). Off ("focus"), если страница медленная, вам нужно будет поместить ее в setTimeout, и это все

Ответ 6

Решение состоит в том, чтобы отфильтровать цель с помощью родителя: if (target! = ELEMENT && target! = Document && target! = P. $ root.parent() [0] && event.which! = 3)

Ответ 7

Вышеупомянутое решение для избранных работало для меня. Но у меня была проблема с добавлением тайм-аута: проблема снова появлялась при щелчке один раз вне часов (или календаря) и повторном щелчке по вводу. Вот мои решения, для календарей и часов:

Календарь:

// Bind the document events.

      $document.on('click.' + STATE.id + ' focusin.' + STATE.id, function (event) {
        var target = $(event.target);
        if(target.hasClass('inputdate')) {
            return;
        }

        // If the target of the event is not the element, close the picker picker.
        // * Dont worry about clicks or focusins on the root because those dont bubble up.
        //   Also, for Firefox, a click on an 'option' element bubbles up directly
        //   to the doc. So make sure the target wasn't the doc.
        // * In Firefox stopPropagation() doesnt prevent right-click events from bubbling,
        //   which causes the picker to unexpectedly close when right-clicking it. So make
        //   sure the event wasnt a right-click.
        if (target != ELEMENT && target != document && event.which != 3) {

          // If the target was the holder that covers the screen,
          // keep the element focused to maintain tabindex.
          P.close(target === P.$root.children()[0]);
        };

Часы:

// Hide when clicking or tabbing on any element except the clock and input
$doc.on('click', function (e) {
  var target = $(e.target);

  if(target.hasClass('inputtime')) {
    return;
  }

  if (target.closest(self.popover.find('.picker__wrap')).length === 0 && target.closest(self.input).length === 0) {
    self.hide();
  }
});

Ответ 8

У меня такая же проблема. Хотя я использую angular2-materialize, я считаю, что это должно работать для людей, использующих materialize напрямую.

Решение, которое работало для меня было обернуть материализовать select вход с div, который имеет click слушатель, который просто вызывает event.stopPropagation():

<div (click)="$event.stopPropagation()">
    <select materialize="material_select" [value]="selectValue" formControlName="someControl">
    // options omitted (not relevant to answer)
    </select>
</div>

Я надеюсь, что это помогает некоторым людям.

Ответ 9

Для тех, кто слишком ленив, чтобы настроить себя. Я добавил время ожидания по умолчанию 500 мс (которое, я думаю, работает последовательно). Это работает как с указателями даты, так и времени.

materialize.js

Ответ 10

Основываясь на ответе Армандо (единственный, который работал для меня), я сделал функцию javascript, используя JQuery для неangular проектов:

function refreshSelects(){
    $('select').material_select('destroy');
    $('select').each(function(){
        $(this).parent().attr("onclick","event.stopPropagation();");
    });
    $('select').material_select();  
}

Затем, когда я должен инициализировать или обновить содержимое селекторов, мне просто нужно вызвать функцию

refreshSelects();