fix: 修复 "TreeSelect" 的下拉框动态宽度（输入文字搜索）时的定位问题

.github/workflows/publish.yml

@@ -0,0 +1,40 @@
+name: publish
+
+on:
+  push:
+    tags:
+      - 'version-*'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.19.1]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+          ref: ${{ github.event.release.tag_name}}
+
+      - name: Use Pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.4.0
+
+      - name: dependencies
+        run: yarn
+
+      - name: build
+        run: yarn build
+
+      - name: set token
+        run: echo -e //registry.npmjs.org/:_authToken=${NPM_TOKEN} >> .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+
+      - name: publish
+        run: yarn release
+
+

package.json

@@ -34,9 +34,10 @@
     "build-es5": "node scripts/build-es5.js",
     "build-css": "node scripts/build-css.js",
     "build-esm": "node scripts/build-esm.js",
-    "build": "npm-run-all build-*",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider npm-run-all build-*",
     "cypress:open": "cross-env NODE_ENV=development cypress open",
-    "cypress:run": "cross-env NODE_ENV=development cypress run --browser chrome"
+    "cypress:run": "cross-env NODE_ENV=development cypress run --browser chrome",
+    "release": "node scripts/publish.js"
   },
   "sideEffects": [
     "*.less"

scripts/publish.js

@@ -0,0 +1,60 @@
+/* eslint-disable import/no-dynamic-require */
+const path = require('path')
+const fs = require('fs')
+const { exec } = require('child_process')
+
+const mianPackage = require(path.resolve(__dirname, '../package.json'))
+const { version } = mianPackage
+
+// 获取version中的 tag 比如 2.0.0-alpha.1 中的 alpha
+let tag = (version.split('-')[1] || '').split('.')[0] || 'latest-2'
+if (tag === 'rc') {
+  tag = 'next-2'
+}
+const mainVersion = version.split('.')[0]
+if (mainVersion !== '2') {
+  console.error('version 不是 2.x.x')
+  process.exit(1)
+}
+
+console.log('version', version)
+console.log('tag', tag)
+
+const validateFile = () => {
+  const distPath = path.resolve(__dirname, `../publish/dist`)
+  if (!fs.existsSync(distPath)) {
+    console.error(`${distPath} 不存在`)
+    process.exit(1)
+  }
+  const esPath = path.resolve(__dirname, `../publish/es/index.js`)
+  const cjsPath = path.resolve(__dirname, `../publish/lib/index.js`)
+  if (!fs.existsSync(esPath) || !fs.existsSync(cjsPath)) {
+    console.error(`${esPath} 或 ${cjsPath} 不存在`)
+    process.exit(1)
+  }
+  const umdPath = path.resolve(__dirname, `../publish/dist/shineout.min.js`)
+  if (!fs.existsSync(umdPath)) {
+    console.error(`${umdPath} 不存在`)
+    process.exit(1)
+  }
+}
+
+const publishPackage = () => {
+  const distPath = path.resolve(__dirname, `../publish`)
+  exec(`npm publish ${distPath} --access public${tag ? ` --tag ${tag}` : ''}`, (error, stdout) => {
+    if (error) {
+      console.error(error)
+      process.exit(1)
+      return
+    }
+    console.log(stdout)
+  })
+}
+
+try {
+  validateFile()
+  publishPackage()
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}

site/pages/components/TreeSelect/example-03-filter.tsx

@@ -18,7 +18,11 @@ const data = [
     id: '1',
     title: '1',
     children: [
-      { id: '1-1', title: '1-1', children: [{ id: '1-1-1', title: '1-1-1' }, { id: '1-1-2', title: '1-1-2' }] },
+      {
+        id: '1-1',
+        title: '1-1',
+        children: [{ id: '1-1-1', title: '1-1-1' }, { id: '1-1-2', title: '1-1-2' }],
+      },
       { id: '1-2', title: '1-2' },
     ],
   },
@@ -50,6 +54,7 @@ const App: React.FC = () => {
         keygen="id"
         renderItem={node => `node ${node.title}`}
         data={data}
+        absolute
       />
       <br />
       <TreeSelect

site/pages/components/TreeSelect/test-01-absolute-big-width.tsx

@@ -0,0 +1,82 @@
+/**
+ * cn - absolute-position
+ *    -- absolute-position
+ * en - absolute-position
+ *    -- absolute-position
+ */
+import React from 'react'
+import { TreeSelect } from 'shineout'
+
+const data = [
+  {
+    id: '1',
+    title: '1',
+    children: [
+      {
+        id: '1-1',
+        title: 'SHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssss',
+        children: [{ id: '1-1-1', title: '1-1-1' }, { id: '1-1-2', title: '1-1-2' }],
+      },
+      { id: '1-2', title: 'ss' },
+    ],
+  },
+  {
+    id: '2',
+    title: 'SHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssssSHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssss',
+    children: [{ id: '2-1', title: '2-1' }, { id: '2-2', title: '2-2' }],
+  },
+  {
+    id: '3',
+    title:
+      'SHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssssSHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssssSHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssss',
+    children: [{ id: '3-1', title: '3-1' }],
+  },
+  { id: '4', title: 's', children: [{ id: '4-1', title: '4-1' }] },
+  {
+    id: '5',
+    title: 'SHEIN X romwe xilie aaaaaaaaaaaaaaaaaasdsssssssss',
+    children: [{ id: '5-1', title: '5-1' }],
+  },
+]
+const App = () => {
+  const [single, setSingle] = React.useState('')
+  const [multi, setMulti] = React.useState([])
+  const handleChangeSingle = v => {
+    setSingle(v)
+  }
+  const handleChangeMultiple = v => {
+    setMulti(v)
+  }
+  const handleFilter = (text: string) => d => d.title.indexOf(text) > -1
+  return (
+    <div>
+      <TreeSelect
+        onFilter={handleFilter}
+        value={single}
+        onChange={handleChangeSingle}
+        clearable
+        style={{ width: 250, marginBottom: 20 }}
+        keygen="id"
+        renderItem={node => `node ${node.title}`}
+        data={data}
+        absolute
+        multiple
+        compressed
+      />
+      {/* <br />
+      <TreeSelect
+        multiple
+        onFilter={handleFilter}
+        value={multi}
+        onChange={handleChangeMultiple}
+        clearable
+        style={{ width: 250 }}
+        keygen="id"
+        renderItem={(node) => `node ${node.title}`}
+        data={data}
+        absolute
+      /> */}
+    </div>
+  )
+}
+export default App

site/pages/documentation/changelog/2.x.x.md

@@ -3,6 +3,7 @@
 ### 2.0.23-beta.7
 
 - 修改 currentCSSZoom !== 1的判断方案  (< 2.0.23)
+- 修复 "TreeSelect" 的下拉框动态宽度（输入文字搜索）时的定位问题  (< 2.0.23)
 
 ### 2.0.23-beta.6
 

src/AnimationList/AbsoluteList.tsx

@@ -13,6 +13,7 @@ import { addZoomListener, removeZoomListener } from '../utils/zoom'
 import { isInDocument } from '../utils/dom/isInDocument'
 import { AbsoluteProps, GetAbsoluteProps } from './Props'
 import { getCurrentCSSZoom } from '../utils/dom/document'
+import { addResizeObserver } from '../utils/dom/element'
 
 const PICKER_V_MARGIN = 4
 let root: HTMLDivElement
@@ -63,6 +64,8 @@ export default function<U extends {}>(List: ComponentType<U>) {
 
     el: HTMLElement
 
+    cancelResizeObserver: () => void
+
     constructor(props: AbsoluteProps) {
       super(props)
       this.handleRef = this.handleRef.bind(this)
@@ -74,7 +77,7 @@ export default function<U extends {}>(List: ComponentType<U>) {
       this.element = document.createElement('div')
       if (this.container) this.container.appendChild(this.element)
       if (props.getResetPosition) {
-        props.getResetPosition(this.resetPosition.bind(this))
+        props.getResetPosition(this.resetPosition)
       }
       this.zoomChangeHandler = this.zoomChangeHandler.bind(this)
     }
@@ -90,6 +93,16 @@ export default function<U extends {}>(List: ComponentType<U>) {
       if (this.props.absolute) {
         addZoomListener(this.zoomChangeHandler)
       }
+
+      if (this.el) {
+        this.cancelResizeObserver = addResizeObserver(
+          this.el,
+          () => {
+            this.resetPosition(true)
+          },
+          { direction: true }
+        )
+      }
     }
 
     componentDidUpdate(prevProps: AbsoluteProps) {
@@ -107,6 +120,7 @@ export default function<U extends {}>(List: ComponentType<U>) {
       if (this.container) {
         if (this.element && this.element.parentNode) this.element.parentNode.removeChild(this.element)
       }
+      if (this.cancelResizeObserver) this.cancelResizeObserver()
     }
 
     getContainer(element?: HTMLElement) {
@@ -234,7 +248,7 @@ export default function<U extends {}>(List: ComponentType<U>) {
       return isRight
     }
 
-    resetPosition(clean?: boolean) {
+    resetPosition = (clean?: boolean) => {
       const { focus, parentElement } = this.props
       if (!this.el || !focus || (this.ajustdoc && !clean)) return
       const width = this.el.offsetWidth
@@ -288,7 +302,7 @@ export default function<U extends {}>(List: ComponentType<U>) {
       }
 
       const mergeStyle = Object.assign({}, style, this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined)
-      return <List getRef={this.handleRef} {...(props as U)} focus={focus} style={mergeStyle} />
+      return <List getRef={this.handleRef} {...props as U} focus={focus} style={mergeStyle} />
     }
 
     render() {
@@ -320,26 +334,30 @@ export default function<U extends {}>(List: ComponentType<U>) {
       const mergeClass = classnames(listClass('absolute-wrapper'), rootClass, autoClass)
       const { focus, style } = props.focus ? this.getStyle() : { style: this.lastStyle, focus: undefined }
       this.element.className = mergeClass
-      const mergeStyle = Object.assign(
-        {},
-        style,
-        props.style,
-        this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined
-      )
+      const overdocStyle = this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined
+      const mergeStyle = Object.assign({}, style, props.style, overdocStyle)
       if (zIndex || typeof zIndex === 'number') mergeStyle.zIndex = parseInt((zIndex as unknown) as string, 10)
+      // console.log('======================')
+      // console.log('this.state.overdoc: >>', this.state.overdoc)
+      // console.log('overdocStyle: >>', overdocStyle)
+      // console.log('mergeStyle: >>', mergeStyle)
+      // console.log('======================')
       return ReactDOM.createPortal(
         <List
           getRef={this.handleRef}
-          {...(props as U)}
+          {...props as U}
           focus={focus}
           style={mergeStyle}
           autoAdapt={autoAdapt}
-          resetPosition={this.resetPosition.bind(this)}
+          resetPosition={this.resetPosition}
         />,
         this.element
       )
     }
   }
 
-  return compose(scrollConsumer, zIndexConsumer)(AbsoluteList) as ComponentType<GetAbsoluteProps<U>>
+  return compose(
+    scrollConsumer,
+    zIndexConsumer
+  )(AbsoluteList) as ComponentType<GetAbsoluteProps<U>>
 }