From bb8ef28913fee650c4255c0d252e7c319e34a984 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 1 Mar 2023 06:53:45 +0800 Subject: [PATCH] Fix Fomantic UI's `touchstart` fastclick, always use `click` for click events (#23065) (#23195) Backport #23065 Using `touchstart` for `click` events is a black magic for mobile browsers (Google: `fastclick`). However, it causes many UX problems if the fastclick is used without careful design. Fomantic UI uses this fastclick for its `dimmer` and `dropdown`, it makes mobile users feel strange when they "touch" the dropdown menu. This PR uses a simple patch to fix that behavior. Then the Fomantic dropdown only uses `click` for click events. This PR is simple enough and won't cause hidden bugs even if the patch doesn't work. In the future, if there are more patches for Fomantic UI, the patches could be placed in a directory like `web_src/fomantic/patches/001-fix-click-touchstart`, etc. Co-authored-by: Lunny Xiao --- Makefile | 2 ++ web_src/fomantic/build/semantic.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index 717d7cafc6..8bfc7ddcaf 100644 --- a/Makefile +++ b/Makefile @@ -859,6 +859,8 @@ fomantic: cp -f $(FOMANTIC_WORK_DIR)/theme.config.less $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/theme.config cp -rf $(FOMANTIC_WORK_DIR)/_site $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/ cd $(FOMANTIC_WORK_DIR) && npx gulp -f node_modules/fomantic-ui/gulpfile.js build + # fomantic uses "touchstart" as click event for some browsers, it's not ideal, so we force fomantic to always use "click" as click event + $(SED_INPLACE) -e 's/clickEvent[ \t]*=/clickEvent = "click", unstableClickEvent =/g' $(FOMANTIC_WORK_DIR)/build/semantic.js $(SED_INPLACE) -e 's/\r//g' $(FOMANTIC_WORK_DIR)/build/semantic.css $(FOMANTIC_WORK_DIR)/build/semantic.js rm -f $(FOMANTIC_WORK_DIR)/build/*.min.* diff --git a/web_src/fomantic/build/semantic.js b/web_src/fomantic/build/semantic.js index 77c82ca6fd..6304c6faf4 100644 --- a/web_src/fomantic/build/semantic.js +++ b/web_src/fomantic/build/semantic.js @@ -2118,7 +2118,7 @@ $.fn.dimmer = function(parameters) { moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - clickEvent = ('ontouchstart' in document.documentElement) + clickEvent = "click", unstableClickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', @@ -2850,7 +2850,7 @@ $.fn.dropdown = function(parameters) { moduleSelector = $allModules.selector || '', hasTouch = ('ontouchstart' in document.documentElement), - clickEvent = hasTouch + clickEvent = "click", unstableClickEvent = hasTouch ? 'touchstart' : 'click',