Question

在最新的Chrome Update 73之后，Materialize CSS 0.100.2的日期选择器，时间选择器和下拉列表不再起作用，单击它时会闪烁，然后消失。

有什么解决方法吗？

Answer 1

此主题正在进行详细讨论 https://github.com/amsul/pickadate.js/issues/1138

作为临时解决方案，我进行了以下更改

Answer 2

我有同样的问题。现在，我进行了一些更改以使其正常运行（对我来说这只是一个临时的热修复程序）。

在materialize.js上（materialize-v0.100.2不是最小的）：

1）在1786行上，有一个setTimeout（带有注释“将单击关闭处理程序添加到文档中”），其等待值为0，将其更改为100。

2）在6558行上，datepicker元素外部的单击具有绑定。（带有注释“绑定文档事件”。）将所有这些绑定放入setTimeout中，等待时间为500毫秒。

固定1用于选择，第二个用于日期选择器。

Answer 3

这是Chrome 73中的回归。我们发布了pickadate 3.6.1，可以解决这个问题。

有关Chrome中的回归功能，请参见https://bugs.chromium.org/p/chromium/issues/detail?id=941910。

Answer 4

解决方案是使用父对象过滤目标： if（target！= ELEMENT && target！= document && target！= P. $ root.parent（）[0] && event.which！= 3）

Answer 5

我在chrome中为此找到了修复，您只需使用此例如： $（“＃dtFrom”）。off（“ focus”）如果页面很慢，则需要放入 setTimeout 之内

>

Answer 6

我有同样的问题。尽管我使用的是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>

我希望这对某些人有帮助。

Answer 7

对于那些懒得自己调整materialize.js的人。我添加了500毫秒的默认超时时间（我认为该超时时间始终一致）。这适用于日期和时间选择器。

materialize.js

Answer 8

基于Armando的答案（唯一对我有用的答案），我使用JQuery针对非角度项目制作了一个javascript函数：

    //                            SizedBox(
//                              height: 10.0,
//                            ),
//                            Padding(
//                              padding: const EdgeInsets.only(
//                                  left: 12.0, bottom: 12.0),
//                              child: Container(
//                                padding: EdgeInsets.symmetric(
//                                    horizontal: 22.0, vertical: 6.0),
//                                decoration: BoxDecoration(
//                                    color: Colors.deepPurpleAccent,
//                                    borderRadius: BorderRadius.circular(20.0)),
//                                child: Text(
//                                  "Read More",
//                                  style: TextStyle(color: Colors.white),
//                                ),
//                              ),
//                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          );
          cardList.add(cardItem);
        }
        return Stack(
          children: cardList,
        );
      }),
    );
  }
}

然后，当我必须初始化或刷新选择器内容时，我只需要调用该函数

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

Answer 9

paratimepicker预告片los siguiente en materialize.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();
      }
    });*/

Chrome Update 73-实现CSS JS触发错误

9 个答案: