UncontrolledTooltip should not raise an error when the target ID does not exist in the DOM

[Muntaner]

Issue description

• reactstrap version ^8.0.0
• react version ^16.8.6

What is happening?

UncontrolledTooltip (and maybe other Uncontrolled components?) raise an error in the React application when the target ID does not exist in the DOM.

What should be happening?

Instead of raising an error which can make the whole React application crash (imho this does not seem to be a critical problem, but more of an UX one), maybe it should just warn the developer/user through the console and peacefully not show the tooltip.

Steps to reproduce issue

1. Create an UncontrolledTooltip whose target does not exist in the DOM (or can exist or not in the DOM depending to the component state).

Error message in console

No error in console.

[rivalver]

Having the same issues with Uncontrolled Tooltips and Badges.

[alamothe]

+1

Also: #773, so sometimes it will crash even if the id is spelled correctly.

I think this should be console.error rather than crashing the whole app.

[modemmute]

Is there any progress on this?

[ahoran3]

Not sure why it this ticket hasnt been updated, but I've encountered the same issue using version 8.7.0.
It appears that a fix was made in 8.8.1 as per the tag release notes here.

[sevdog]

This issue is still present, even if in v8.8.1 a "safe-render" was added the problem is findDOMElements:

reactstrap/src/utils.js

Lines 297 to 301 in 551d9ee

	if (!selection.length) {
	throw new Error(
	`The target '${target}' could not be identified in the dom, tip: check spelling`,
	);
	}

This issue is caused when tooltip and target are created togheter, thus the target does not yet exists in the DOM while the tooltip is moutend.

This happens only if the tooltip is open at first render (defaultOpen for uncontrolled tooltip).

[alamothe]

Definitely not fixed, we see frequent crashes in Sentry due to this.