diff --git a/components/vc-menu/DOMWrap.jsx b/components/vc-menu/DOMWrap.jsx index c92033517..bff05f707 100644 --- a/components/vc-menu/DOMWrap.jsx +++ b/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 => { diff --git a/components/vc-menu/SubPopupMenu.jsx b/components/vc-menu/SubPopupMenu.jsx index 6c4352ac3..2c7336b02 100644 --- a/components/vc-menu/SubPopupMenu.jsx +++ b/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) diff --git a/components/vc-menu/index.js b/components/vc-menu/index.js index 434c45bb3..e1d0837b9 100644 --- a/components/vc-menu/index.js +++ b/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' diff --git a/components/vc-menu/util.js b/components/vc-menu/util.js index 55228298f..ec946b745 100644 --- a/components/vc-menu/util.js +++ b/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 +} diff --git a/components/vc-select/Select.jsx b/components/vc-select/Select.jsx index 4514fea05..d7cc38b22 100644 --- a/components/vc-select/Select.jsx +++ b/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} >