Dropdown 的 renderOption错误

[a857430369]

描述错误

vue: ` <n-dropdown v-if="child.menus" placement="top-start" size="medium" :options="child.menus" @select="(key, option) => onSelect(option)" :render-option="renderOption" style="display: flex;flex-direction: column;align-items: start;"> <n-button v-bind="child.props" icon-placement="right" @click="onSelect(child)" :disabled="disabled">

            <template v-if="!child.hideIcon" #icon>
              <f-icon icon="icon-shang"></f-icon>
            </template>
          </n-button>

`

JS: const renderOption = (props) => { return h(FTipBtn, props.option?.tipProps, h(NButton, { text: true }, props.node)); }

出现了 Cannot read properties of null (reading 'getBoundingClientRect')

复现步骤

1.<n-dropdown v-if="child.menus" placement="top-start" size="medium" :options="child.menus" @select="(key, option) => onSelect(option)" :render-option="renderOption" style="display: flex;flex-direction: column;align-items: start;"> <n-button v-bind="child.props" icon-placement="right" @click="onSelect(child)" :disabled="disabled">

            <template v-if="!child.hideIcon" #icon>
              <f-icon icon="icon-shang"></f-icon>
            </template>
          </n-button>

2. h函数渲染自定义组件

最小复现链接

/

系统信息

naviui:2.34.3

使用的包管理器

npm

验证

• [X] 阅读 贡献指南。
• [X] 阅读 文档。
• [X] 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• [X] 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• [X] 提供的复现是最小可复现的示例。

[a857430369]

const renderOption = ({node, option}) => { node.children[0].children[0] = h(FTipBtn, option?.tipProps, h(NButton, { text: true }, option.label)); return node // return h(FTipBtn, props.option?.tipProps, h(NButton, { text: true }, props.node)); } const renderLabel = (option)=>{ return '' }

我看我这样解决了

[jahnli]

提供个在线复现链接

[a857430369]

test1.xlsx 后缀改一下为html 悬浮到其它那就报错了

[Sepush]

prefer online demo with codesandbox

[a857430369]

https://codesandbox.io/p/sandbox/test-nkynll?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzjl4a2r0006356itmloxp9f%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzjl4a2r0002356id8hqtb0t%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzjl4a2r0003356imscjdlpv%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzjl4a2r0005356i8x2y9bfe%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzjl4a2r0002356id8hqtb0t%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjl4a2q0001356icpgfxpym%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzjl4a2r0002356id8hqtb0t%2522%252C%2522activeTabId%2522%253A%2522clzjl4a2q0001356icpgfxpym%2522%257D%252C%2522clzjl4a2r0005356i8x2y9bfe%2522%253A%257B%2522id%2522%253A%2522clzjl4a2r0005356i8x2y9bfe%2522%252C%2522activeTabId%2522%253A%2522clzjl73x3001l356itq8enmt4%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzjl4a2r0004356ize7qo91j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522SANDBOX_INFO%2522%252C%2522isCloud%2522%253Afalse%252C%2522id%2522%253A%2522clzjl687a000p356i5d4kl2do%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clzjl73x3001l356itq8enmt4%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzjl4a2r0003356imscjdlpv%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzjl4a2r0003356imscjdlpv%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[Sepush]

this is not a working URL check it

[a857430369]

Copy the link to browser access