@@ -229,4 +229,58 @@ describe('tooltip imperative API', () => {
229229 await userEvent . click ( screen . getByText ( 'imperative tooltip' ) )
230230 expect ( await screen . findByRole ( 'tooltip' ) ) . toHaveTextContent ( 'Opened imperatively!' )
231231 } )
232+
233+ test ( 'imperative open with a selector that matches nothing does not reuse declarative anchors' , async ( ) => {
234+ const MissingImperativeAnchorExample = ( ) => {
235+ const tooltipRef = useRef ( null )
236+
237+ return (
238+ < >
239+ < section id = "section-anchor-select" >
240+ < p >
241+ < button data-tooltip-id = "anchor-select" > Anchor select</ button >
242+ </ p >
243+ < Tooltip
244+ ref = { tooltipRef }
245+ id = "tooltip-content"
246+ anchorSelect = "section[id='section-anchor-select'] > p > button"
247+ place = "bottom"
248+ openEvents = { { click : true } }
249+ closeEvents = { { click : true } }
250+ globalCloseEvents = { { clickOutsideAnchor : true } }
251+ >
252+ Tooltip content
253+ </ Tooltip >
254+ </ section >
255+
256+ < button
257+ onClick = { ( ) => {
258+ tooltipRef . current ?. open ( {
259+ anchorSelect : '#missing-imperative-anchor' ,
260+ content : < div > Opened imperatively!</ div > ,
261+ } )
262+ } }
263+ >
264+ missing imperative anchor
265+ </ button >
266+ </ >
267+ )
268+ }
269+
270+ render ( < MissingImperativeAnchorExample /> )
271+
272+ await userEvent . click ( screen . getByText ( 'Anchor select' ) )
273+ expect ( await screen . findByRole ( 'tooltip' ) ) . toHaveTextContent ( 'Tooltip content' )
274+
275+ await userEvent . click ( document . body )
276+ await waitFor ( ( ) => {
277+ expect ( screen . queryByRole ( 'tooltip' ) ) . not . toBeInTheDocument ( )
278+ } )
279+
280+ await userEvent . click ( screen . getByText ( 'missing imperative anchor' ) )
281+
282+ await waitFor ( ( ) => {
283+ expect ( screen . queryByRole ( 'tooltip' ) ) . not . toBeInTheDocument ( )
284+ } )
285+ } )
232286} )
0 commit comments