refactor: use findDomNode instead $el

components/_util/props-util.js

@@ -116,7 +116,7 @@ const getSlotOptions = () => {
   throw Error('使用 .type 直接取值');
 };
 const findDOMNode = instance => {
-  let node = instance.$el || instance;
+  let node = instance && (instance.$el || instance);
   while (node && !node.tagName) {
     node = node.nextSibling;
   }

components/_util/wave.jsx

@@ -2,6 +2,7 @@ import { nextTick, inject } from 'vue';
 import TransitionEvents from './css-animation/Event';
 import raf from './raf';
 import { ConfigConsumerProps } from '../config-provider';
+import { findDOMNode } from './props-util';
 let styleForPesudo;
 
 // Where el is the DOM element you'd like to test for visibility
@@ -24,7 +25,7 @@ export default {
   props: ['insertExtraNode'],
   mounted() {
     nextTick(() => {
-      const node = this.$el;
+      const node = findDOMNode(this);
       if (node.nodeType !== 1) {
         return;
       }
@@ -90,7 +91,7 @@ export default {
     onTransitionStart(e) {
       if (this.destroy) return;
 
-      const node = this.$el;
+      const node = findDOMNode(this);
       if (!e || e.target !== node) {
         return;
       }

components/alert/index.jsx

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
-import { getComponent, isValidElement } from '../_util/props-util';
+import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 function noop() {}
@@ -74,7 +74,7 @@ const Alert = {
   methods: {
     handleClose(e) {
       e.preventDefault();
-      const dom = this.$el;
+      const dom = findDOMNode(this);
       dom.style.height = `${dom.offsetHeight}px`;
       // Magic code
       // 重复一次后才能正确设置 height

components/anchor/Anchor.jsx

@@ -5,7 +5,7 @@ import addEventListener from '../vc-util/Dom/addEventListener';
 import Affix from '../affix';
 import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
-import { initDefaultProps } from '../_util/props-util';
+import { initDefaultProps, findDOMNode } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 
@@ -253,7 +253,9 @@ export default {
         return;
       }
       const { _sPrefixCls } = this;
-      const linkNode = this.$el.getElementsByClassName(`${_sPrefixCls}-link-title-active`)[0];
+      const linkNode = findDOMNode(this).getElementsByClassName(
+        `${_sPrefixCls}-link-title-active`,
+      )[0];
       if (linkNode) {
         this.$refs.inkNode.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
       }

components/color-picker/ColorPicker.jsx

@@ -7,7 +7,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import enUS from './locale/en_US';
 import debounce from 'lodash/debounce';
 
-import { getOptionProps } from '../_util/props-util';
+import { getOptionProps, findDOMNode } from '../_util/props-util';
 let colors = '#194d33';
 export default {
   name: 'AColorPicker',
@@ -90,7 +90,7 @@ export default {
       this.pickr.destroyAndRemove();
       const dom = document.createElement('div');
       dom.id = 'color-picker' + this._uid;
-      const box = this.$el.querySelector('#color-picker-box' + this._uid);
+      const box = findDOMNode(this).querySelector('#color-picker-box' + this._uid);
       box.appendChild(dom);
       this.createPickr();
       this.eventsBinding();
@@ -122,7 +122,7 @@ export default {
         Object.assign(
           {
             el: '#color-picker' + this._uid,
-            container: (container && container(this.$el)) || document.body,
+            container: (container && container(findDOMNode(this))) || document.body,
             theme: 'monolith', // or 'monolith', or 'nano'
             default: this.value || this.defaultValue || null, // 有默认颜色pickr才可以获取到_representation
             components: {

components/modal/ActionButton.jsx

@@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
 import Button from '../button';
 import BaseMixin from '../_util/BaseMixin';
 import buttonTypes from '../button/buttonTypes';
-import { getSlot } from '../_util/props-util';
+import { getSlot, findDOMNode } from '../_util/props-util';
 const ButtonType = buttonTypes().type;
 const ActionButtonProps = {
   type: ButtonType,
@@ -22,7 +22,7 @@ export default {
   },
   mounted() {
     if (this.autofocus) {
-      this.timeoutId = setTimeout(() => this.$el.focus());
+      this.timeoutId = setTimeout(() => findDOMNode(this).focus());
     }
   },
   beforeUnmount() {

components/table/filterDropdown.jsx

@@ -8,7 +8,7 @@ import Checkbox from '../checkbox';
 import Radio from '../radio';
 import FilterDropdownMenuWrapper from './FilterDropdownMenuWrapper';
 import { FilterMenuProps } from './interface';
-import { initDefaultProps, getOptionProps, isValidElement } from '../_util/props-util';
+import { initDefaultProps, getOptionProps, isValidElement, findDOMNode } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import BaseMixin from '../_util/BaseMixin';
 import { generateValueMaps } from './util';
@@ -98,7 +98,7 @@ export default {
       return this.neverShown ? false : this.sVisible;
     },
     setNeverShown(column) {
-      const rootNode = this.$el;
+      const rootNode = findDOMNode(this);
       const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`);
       if (filterBelongToScrollBody) {
         // When fixed column have filters, there will be two dropdown menus

components/transfer/list.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
-import { isValidElement, initDefaultProps, splitAttrs } from '../_util/props-util';
+import { isValidElement, initDefaultProps, splitAttrs, findDOMNode } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import Checkbox from '../checkbox';
 import Search from './search';
@@ -230,7 +230,7 @@ export default {
       // Manually trigger scroll event for lazy search bug
       // https://github.com/ant-design/ant-design/issues/5631
       this.triggerScrollTimer = setTimeout(() => {
-        const transferNode = this.$el;
+        const transferNode = findDOMNode(this);
         const listNode = transferNode.querySelectorAll('.ant-transfer-list-content')[0];
         if (listNode) {
           triggerEvent(listNode, 'scroll');

components/transfer/renderListBody.jsx

@@ -3,6 +3,7 @@ import raf from '../_util/raf';
 import ListItem from './ListItem';
 import PropTypes from '../_util/vue-types';
 import getTransitionProps from '../_util/getTransitionProps';
+import { findDOMNode } from '../_util/props-util';
 function noop() {}
 const ListBody = {
   name: 'ListBody',
@@ -29,7 +30,7 @@ const ListBody = {
       this.$nextTick(() => {
         const { lazy } = this.$props;
         if (lazy !== false) {
-          const container = this.$el;
+          const container = findDOMNode(this);
           raf.cancel(this.lazyId);
           this.lazyId = raf(() => {
             if (container) {

components/vc-align/Align.jsx

@@ -47,7 +47,7 @@ export default {
       const props = this.$props;
       let reAlign = false;
       if (!props.disabled) {
-        const source = this.$el;
+        const source = findDOMNode(this);
         const sourceRect = source ? source.getBoundingClientRect() : null;
 
         if (prevProps.disabled) {

components/vc-calendar/src/Calendar.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, getComponent } from '../../_util/props-util';
+import { getOptionProps, hasProp, getComponent, findDOMNode } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import KeyCode from '../../_util/KeyCode';
 import moment from 'moment';
@@ -232,7 +232,7 @@ const Calendar = {
     },
 
     getRootDOMNode() {
-      return this.$el;
+      return findDOMNode(this);
     },
     openTimePicker() {
       this.onPanelChange(null, 'time');

components/vc-calendar/src/calendar/CalendarFooter.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps } from '../../../_util/props-util';
+import { getOptionProps, findDOMNode } from '../../../_util/props-util';
 import TodayButton from './TodayButton';
 import OkButton from './OkButton';
 import TimePickerButton from './TimePickerButton';
@@ -33,7 +33,7 @@ const CalendarFooter = {
     },
 
     getRootDOMNode() {
-      return this.$el;
+      return findDOMNode(this);
     },
   },
 

components/vc-calendar/src/date/DateInput.jsx

@@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getComponent } from '../../../_util/props-util';
+import { getComponent, findDOMNode } from '../../../_util/props-util';
 import moment from 'moment';
 import { formatDate } from '../util';
 import KeyCode from '../../../_util/KeyCode';
@@ -164,7 +164,7 @@ const DateInput = {
       }
     },
     getRootDOMNode() {
-      return this.$el;
+      return findDOMNode(this);
     },
     focus() {
       if (dateInputInstance) {

components/vc-dialog/Dialog.jsx

@@ -1,5 +1,5 @@
 import { provide, Transition } from 'vue';
-import { initDefaultProps, getSlot } from '../_util/props-util';
+import { initDefaultProps, getSlot, findDOMNode } from '../_util/props-util';
 import KeyCode from '../_util/KeyCode';
 import contains from '../vc-util/Dom/contains';
 import LazyRenderBox from './LazyRenderBox';
@@ -116,7 +116,7 @@ export default {
           this.switchScrollingEffect();
           // this.$refs.wrap.focus()
           this.tryFocus();
-          const dialogNode = this.$refs.dialog.$el;
+          const dialogNode = findDOMNode(this.$refs.dialog);
           if (mousePosition) {
             const elOffset = offset(dialogNode);
             setTransformOrigin(

components/vc-rate/src/Rate.jsx

@@ -1,7 +1,13 @@
 import PropTypes from '../../_util/vue-types';
 import classNames from 'classnames';
 import KeyCode from '../../_util/KeyCode';
-import { initDefaultProps, hasProp, getOptionProps, getComponent } from '../../_util/props-util';
+import {
+  initDefaultProps,
+  hasProp,
+  getOptionProps,
+  getComponent,
+  findDOMNode,
+} from '../../_util/props-util';
 import BaseMixin from '../../_util/BaseMixin';
 import { getOffsetLeft } from './util';
 import Star from './Star';
@@ -129,7 +135,7 @@ export default {
       this.__emit('keydown', event);
     },
     getStarDOM(index) {
-      return this.$refs['stars' + index].$el;
+      return findDOMNode(this.$refs['stars' + index]);
     },
     getStarValue(index, x) {
       let value = index + 1;

components/vc-resize-observer/index.jsx

@@ -1,6 +1,7 @@
 // based on rc-resize-observer 0.1.3
 import ResizeObserver from 'resize-observer-polyfill';
 import BaseMixin from '../_util/BaseMixin';
+import { findDOMNode } from '../_util/props-util';
 
 // Still need to be compatible with React 15, we use class component here
 const VueResizeObserver = {
@@ -40,7 +41,7 @@ const VueResizeObserver = {
       }
 
       // Unregister if element changed
-      const element = this.$el;
+      const element = findDOMNode(this);
       const elementChanged = element !== this.currentElement;
       if (elementChanged) {
         this.destroyObserver();

components/vc-select/DropdownMenu.jsx

@@ -73,7 +73,7 @@ export default {
   methods: {
     scrollActiveItemToView() {
       // scroll into view
-      const itemComponent = this.firstActiveItem && this.firstActiveItem.$el;
+      const itemComponent = this.firstActiveItem && findDOMNode(this.firstActiveItem);
       const props = this.$props;
       const { value, visible, firstActiveValue } = props;
       if (!itemComponent || !visible) {

components/vc-select/Select.jsx

@@ -15,6 +15,7 @@ import {
   getEvents,
   getOptionProps,
   getSlot,
+  findDOMNode,
 } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
 import { cloneElement } from '../_util/vnode';
@@ -471,16 +472,13 @@ const Select = {
 
     onMenuDeselect({ item, domEvent }) {
       if (domEvent.type === 'keydown' && domEvent.keyCode === KeyCode.ENTER) {
-        const menuItemDomNode = item.$el;
+        const menuItemDomNode = findDOMNode(item);
         // https://github.com/ant-design/ant-design/issues/20465#issuecomment-569033796
         if (!isHidden(menuItemDomNode)) {
           this.removeSelected(getValuePropValue(item));
         }
         return;
       }
-      if (domEvent.type === 'click') {
-        this.removeSelected(getValuePropValue(item));
-      }
       if (this.autoClearSearchValue) {
         this.setInputValue('');
       }
@@ -676,15 +674,13 @@ const Select = {
         (e.relatedTarget === this.$refs.arrow ||
           (target &&
             this.selectTriggerRef &&
-            this.selectTriggerRef.getInnerMenu() &&
+            findDOMNode(this.selectTriggerRef.getInnerMenu()) === target) ||
-            this.selectTriggerRef.getInnerMenu().$el === target) ||
           contains(e.target, target))
       ) {
         e.target.focus();
         e.preventDefault();
         return;
       }
-      this.clearBlurTime();
       if (this.disabled) {
         e.preventDefault();
         return;

components/vc-time-picker/Select.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import classnames from 'classnames';
 import raf from 'raf';
+import { findDOMNode } from '../_util/props-util';
 
 function noop() {}
 const scrollTo = (element, to, duration) => {
@@ -109,7 +110,7 @@ const Select = {
 
     scrollToSelected(duration) {
       // move to selected item
-      const select = this.$el;
+      const select = findDOMNode(this);
       const list = this.$refs.list;
       if (!list) {
         return;

components/vc-tree-select/src/Select.jsx

@@ -236,7 +236,7 @@ const Select = {
           if (treeNode) {
             const domNode = findDOMNode(treeNode);
             raf(() => {
-              const popupNode = this.popup.$el;
+              const popupNode = findDOMNode(this.popup);
               const triggerContainer = findPopupContainer(popupNode, `${prefixCls}-dropdown`);
               const searchNode = this.popup.searchRef.current;
 

components/vc-trigger/Popup.jsx

@@ -65,13 +65,6 @@ export default {
       this.setStretchSize();
     });
   },
-  // beforeUnmount() {
-  //   if (this.$el.parentNode) {
-  //     this.$el.parentNode.removeChild(this.$el);
-  //   } else if (this.$el.remove) {
-  //     this.$el.remove();
-  //   }
-  // },
   methods: {
     onAlign(popupDomNode, align) {
       const props = this.$props;

components/vc-upload/src/IframeUploader.jsx

@@ -3,7 +3,7 @@ import BaseMixin from '../../_util/BaseMixin';
 import classNames from 'classnames';
 import getUid from './uid';
 import warning from '../../_util/warning';
-import { getSlot } from '../../_util/props-util';
+import { getSlot, findDOMNode } from '../../_util/props-util';
 
 const IFRAME_STYLE = {
   position: 'absolute',
@@ -195,7 +195,7 @@ const IframeUploader = {
       }
     },
     updateIframeWH() {
-      const rootNode = this.$el;
+      const rootNode = findDOMNode(this);
       const iframeNode = this.getIframeNode();
       iframeNode.style.height = `${rootNode.offsetHeight}px`;
       iframeNode.style.width = `${rootNode.offsetWidth}px`;