feat: 调整 absolute 下拉控制组件定位逻辑，增加容器在有无 relative 下的处理

cypress/e2e/AnimationList/test-absolute-autoAdapt.cy.ts

@@ -0,0 +1,59 @@
+it('下拉列表', () => {
+  cy.visit('/cn/components/Select?example=009-popupContainer-absolute-long')
+
+  function getNearestPositionDom(target: HTMLElement): HTMLElement {
+    if (target) {
+      const { position } = getComputedStyle(target)
+
+      if (position !== 'static') {
+        return target
+      }
+
+      if (target.parentElement) {
+        return getNearestPositionDom(target.parentElement)
+      }
+    }
+    return document.body
+  }
+
+  cy.get('#relative-app').as('App')
+  cy.get('#app-out-container').as('OutContainer')
+  cy.get('#app-root-container').as('Container')
+
+  cy.viewport(1100, 500)
+  cy.scrollTo(0, 1000)
+  cy.get('#app-out-container').scrollTo(100, 150)
+
+  cy.get('#app-root-container').as('Container')
+
+  cy.get(`.select`).as('select')
+  cy.get(`@select`).click()
+  cy.get('@Container')
+    .find(`.so-select-options`)
+    .should('have.length', 1)
+
+  cy.get(`.select`).then($el => {
+    const rect = $el[0].getBoundingClientRect()
+    cy.get('@Container')
+      .find(`.so-select-options`)
+      .then($co => {
+        const coRect = $co[0].getBoundingClientRect()
+        // 3 为固定间距
+        expect(Math.abs(coRect.top - rect.top - rect.height)).to.eq(3)
+      })
+  })
+
+  cy.get('.so-select-options').then($el => {
+    const rect = $el[0].getBoundingClientRect()
+    cy.get(`@select`).then($co => {
+      const coRect = $co[0].getBoundingClientRect()
+      expect(rect.width + coRect.left).to.be.greaterThan(1100)
+    })
+    cy.get('@Container').then($container => {
+      const nearstPositionDom = getNearestPositionDom($container[0])
+      const nearstPositionDomRect = nearstPositionDom.getBoundingClientRect()
+      const offset = 1100 - nearstPositionDomRect.left - nearstPositionDomRect.width
+      expect(getComputedStyle($el[0]).right).to.eq(`${offset * -1}px`)
+    })
+  })
+})

cypress/e2e/AnimationList/test.absolute-relative.cy.ts

@@ -0,0 +1,106 @@
+describe('Select[clickAway]', () => {
+  it('下拉列表', () => {
+    cy.visit('/cn/components/Select?example=008-popupContainer-absolute-relative')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top - rect.height)).to.eq(3)
+          })
+        cy.get('@Container').click({ force: true })
+      })
+    })
+  })
+
+  it('上拉列表', () => {
+    cy.visit('/cn/components/Select?example=008-popupContainer-absolute-relative')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    cy.get('#apis').invoke('css', { display: 'none' })
+    cy.get('#api-Select').invoke('css', { display: 'none' })
+    cy.get('.doc-api-table').invoke('css', { display: 'none' })
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top)).to.eq(coRect.height + 3)
+          })
+      })
+    })
+  })
+})

cypress/e2e/AnimationList/test.absolute.cy.ts

@@ -0,0 +1,105 @@
+describe('Select[clickAway]', () => {
+  it('下拉列表', () => {
+    cy.visit('/cn/components/Select?example=007-popupContainer-absolute')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top - rect.height)).to.eq(3)
+          })
+      })
+    })
+  })
+
+  it('上拉列表', () => {
+    cy.visit('/cn/components/Select?example=007-popupContainer-absolute')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    cy.get('#apis').invoke('css', { display: 'none' })
+    cy.get('#api-Select').invoke('css', { display: 'none' })
+    cy.get('.doc-api-table').invoke('css', { display: 'none' })
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top)).to.eq(coRect.height + 3)
+          })
+      })
+    })
+  })
+})

site/chunks/Components/Select.js

@@ -416,6 +416,45 @@ const examples = [
     parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-006-open.tsx'),
 
   },
+  {
+    name: 'test-007-popupContainer-absolute',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '指定无定位属性容器后，下拉菜单是否正常定位 \n 检查容器位置是否在下拉菜单之下。该示例需要单独运行，否则 setConfig 会干扰其他示例',
+      ' \n '
+    ),
+    component: require('doc/pages/components/Select/test-007-popupContainer-absolute.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Select/test-007-popupContainer-absolute.tsx'),
+    parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-007-popupContainer-absolute.tsx'),
+
+  },
+  {
+    name: 'test-008-popupContainer-absolute-relative',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '指定容器后，下拉菜单是否正常定位 \n 检查容器位置是否在下拉菜单之下。该示例需要单独运行，否则 setConfig 会干扰其他示例',
+      ' \n '
+    ),
+    component: require('doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx'),
+    parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx'),
+
+  },
+  {
+    name: 'test-009-popupContainer-absolute-long',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '指定无定位属性容器后，超长下拉菜单是否正常定位 \n ',
+      ' \n options auto adapt width'
+    ),
+    component: require('doc/pages/components/Select/test-009-popupContainer-absolute-long.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Select/test-009-popupContainer-absolute-long.tsx'),
+    parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-009-popupContainer-absolute-long.tsx'),
+
+  },
 ]
 
 const codes = undefined