feat: update vc-menu vc-select

Author: tangjinzhou

components/vc-menu/DOMWrap.jsx

@@ -13,6 +13,7 @@ const canUseDOM = !!(
 )
 
 const MENUITEM_OVERFLOWED_CLASSNAME = 'menuitem-overflowed'
+const FLOAT_PRECISION_ADJUST = 0.5
 
 // Fix ssr
 if (canUseDOM) {
@@ -215,7 +216,10 @@ const DOMWrap = {
       // index for last visible child in horizontal mode
       let lastVisibleIndex
 
-      if (this.originalTotalWidth > width) {
+      // float number comparison could be problematic
+      // e.g. 0.1 + 0.2 > 0.3 =====> true
+      // thus using FLOAT_PRECISION_ADJUST as buffer to help the situation
+      if (this.originalTotalWidth > width + FLOAT_PRECISION_ADJUST) {
         lastVisibleIndex = -1
 
         this.menuItemSizes.forEach(liWidth => {

components/vc-menu/SubPopupMenu.jsx

@@ -4,7 +4,7 @@ import { connect } from '../_util/store'
 import BaseMixin from '../_util/BaseMixin'
 import KeyCode from '../_util/KeyCode'
 import classNames from 'classnames'
-import { getKeyFromChildrenIndex, loopMenuItem, noop } from './util'
+import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice } from './util'
 import DOMWrap from './DOMWrap'
 import { cloneElement } from '../_util/vnode'
 import { initDefaultProps, getOptionProps, getPropsData, getEvents, getComponentFromProp } from '../_util/props-util'
@@ -324,7 +324,8 @@ const SubPopupMenu = {
           select: this.onSelect,
         },
       }
-      if (props.mode === 'inline') {
+      // ref: https://github.com/ant-design/ant-design/issues/13943
+      if (props.mode === 'inline' || isMobileDevice()) {
         newChildProps.props.triggerSubMenuAction = 'click'
       }
       return cloneElement(child, newChildProps)

components/vc-menu/index.js

@@ -1,4 +1,4 @@
-// based on rc-menu 7.4.20
+// based on rc-menu 7.4.21
 import Menu from './Menu'
 import SubMenu from './SubMenu'
 import MenuItem, { menuItemProps } from './MenuItem'

components/vc-menu/util.js

@@ -1,3 +1,5 @@
+const isMobile = require('ismobilejs')
+
 export function noop () {
 }
 
@@ -113,14 +115,27 @@ export const menuAllProps = {
   ],
 }
 
-export const getWidth = (elem) => (
-  elem &&
-  typeof elem.getBoundingClientRect === 'function' &&
-  elem.getBoundingClientRect().width
-) || 0
+// ref: https://github.com/ant-design/ant-design/issues/14007
+// ref: https://bugs.chromium.org/p/chromium/issues/detail?id=360889
+// getBoundingClientRect return the full precision value, which is
+// not the same behavior as on chrome. Set the precision to 6 to
+// unify their behavior
+export const getWidth = (elem) => {
+  let width = elem &&
+    typeof elem.getBoundingClientRect === 'function' &&
+    elem.getBoundingClientRect().width
+  if (width) {
+    width = +width.toFixed(6)
+  }
+  return width || 0
+}
 
 export const setStyle = (elem, styleProperty, value) => {
   if (elem && typeof elem.style === 'object') {
     elem.style[styleProperty] = value
   }
 }
+
+export const isMobileDevice = () => {
+  return isMobile.any
+}

components/vc-select/Select.jsx

@@ -103,7 +103,6 @@ const Select = {
     this.saveSelectTriggerRef = saveRef(this, 'selectTriggerRef')
     this.saveRootRef = saveRef(this, 'rootRef')
     this.saveSelectionRef = saveRef(this, 'selectionRef')
-    this.ariaId = generateUUID()
     this._focused = false
     this._mouseDown = false
     this._options = []
@@ -127,6 +126,7 @@ const Select = {
       _backfillValue: '',
       // a flag for aviod redundant getOptionsInfoFromProps call
       _skipBuildOptionsInfo: true,
+      _ariaId: generateUUID(),
     }
     return {
       ...state,
@@ -1497,7 +1497,7 @@ const Select = {
         'aria-autocomplete': 'list',
         'aria-haspopup': 'true',
         'aria-expanded': realOpen,
-        'aria-controls': this.ariaId,
+        'aria-controls': this.$data._ariaId,
       },
       on: {
         click: this.selectionRefClick,
@@ -1562,7 +1562,7 @@ const Select = {
           value: this.saveSelectTriggerRef,
         }] }}
         dropdownRender={props.dropdownRender}
-        ariaId={this.ariaId}
+        ariaId={this.$data._ariaId}
       >
         <div
           {...{ directives: [{

components/vc-select/index.js

@@ -1,4 +1,4 @@
-// based on vc-select 8.6.9
+// based on vc-select 8.7.0
 import ProxySelect, { Select } from './Select'
 import Option from './Option'
 import { SelectPropTypes } from './PropTypes'

package.json

@@ -173,6 +173,7 @@
         "enquire.js": "^2.1.6",
         "intersperse": "^1.0.0",
         "is-negative-zero": "^2.0.0",
+        "ismobilejs": "^0.5.1",
         "json2mq": "^0.2.0",
         "lodash": "^4.17.5",
         "moment": "^2.21.0",