Tooltip issue

[alexander-gvozd]

Describe the bug

After I upgrade from version 1.6.1 to version 2.0.1, I have an issue with the tooltip. When I try to open any tooltip the page (javascript) freezes. My dependencies is

{
    "@babel/core": "^7.14.0",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-react-jsx": "^7.12.17",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.12.13",
    "@date-io/date-fns": "^1.3.13",
    "@fingerprintjs/fingerprintjs": "^3.3.0",
    "@flowjs/flow.js": "git+https://github.com/flowjs/flow.js.git",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/pickers": "^3.3.10",
    "@stripe/stripe-js": "^1.13.2",
    "@tinymce/tinymce-react": "^3.13.0",
    "@types/react": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-transition-group": "^4.4.2",
    "air-datepicker": "^2.2.3",
    "babel-loader": "^8.2.2",
    "babel-plugin-add-module-exports": "^1.0.4",
    "babel-plugin-module-resolver": "^4.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-sass": "^3.4.1",
    "bourbon": "^4.3.4",
    "classnames": "^2.2.6",
    "compass-mixins": "^0.12.10",
    "countup.js": "2.0.7",
    "date-fns": "^2.22.1",
    "fancybox": "^3.0.1",
    "font-awesome": "^4.7.0",
    "fontfaceobserver": "^2.0.13",
    "form-serialize": "^0.7.2",
    "foundation-sites": "^6.6.3",
    "google-map-react": "^2.1.10",
    "html-to-react": "^1.2.11",
    "i18next": "^20.1.0",
    "i18next-conv": "^10.1.0",
    "i18next-intervalplural-postprocessor": "^3.0.0",
    "imask": "^6.0.7",
    "intersection-observer": "^0.4.0",
    "intl": "^1.2.5",
    "intl-polyfill": "0.0.3",
    "jQuery.dotdotdot": "file:local_modules/jQuery.dotdotdot",
    "javascript-auto-complete": "file:local_modules/JavaScript-auto-complete",
    "jquery": "^3.6.0",
    "jquery-form": "^4.3.0",
    "jquery-mousewheel": "^3.1.13",
    "jquery-shapeshift": "^1.0.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "jquery.cookie": "^1.4.1",
    "js-cookie": "^2.1.4",
    "jscrollpane": "git+https://github.com/vitch/jScrollPane.git",
    "leaflet": "^1.7.1",
    "linkstate": "^1.1.0",
    "lodash": "^4.17.21",
    "mindy-sass": "file:local_modules/mindy-sass",
    "mmodal": "git://github.com/tsukasa-mixer/mmodal.git",
    "modernizr": "^3.5.0",
    "moment": "^2.29.1",
    "moment-weekday-calc": "^1.1.4",
    "node-waves": "git+https://github.com/fians/Waves.git",
    "nouislider": "^9.2.0",
    "npm": "^6.11.3",
    "pace-js": "git+https://github.com/CodeByZach/pace.git",
    "photoswipe": "^4.1.3",
    "preact": "^10.5.13",
    "preact-markup": "^1.6.0",
    "preact-render-to-string": "^3.6.3",
    "react": "^17.0.2",
    "react-accessible-accordion": "^3.3.4",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "^2.0.2",
    "react-cropper": "^2.1.8",
    "react-dom": "^17.0.2",
    "react-dropzone": "^11.4.2",
    "react-highlight-words": "^0.17.0",
    "react-hoverintent": "^0.0.10",
    "react-i18next": "^11.8.12",
    "react-id-swiper": "^4.0.0",
    "react-input-mask": "^2.0.4",
    "react-leaflet": "^3.2.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-sly-wrapper": "git+https://github.com/thangkieu/react-sly-wrapper.git",
    "react-to-print": "^2.12.6",
    "react-transition-group": "^4.4.2",
    "react-uuid": "^1.0.2",
    "react-yandex-maps": "^4.6.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-thunk": "^2.2.0",
    "regenerator-runtime": "^0.13.7",
    "sass-loader": "^12.3.0",
    "select2": "^4.0.13",
    "simplebar": "^2.6.1",
    "slick-carousel": "^1.8.1",
    "source-map-loader": "^2.0.1",
    "stripe": "^8.143.0",
    "swiper": "^6.5.0",
    "tinymce": "^5.10.0",
    "underscore": "^1.13.1",
    "validate.js": "^0.12.0",
    "vanilla-lazyload": "^8.7.1",
    "webfontloader": "^1.6.28",
    "what-input": "^5.2.10",
    "whatwg-fetch": "^2.0.4",
    "yargs": "^16.2.0"
  }

Code example(from documentation):

  {['top', 'right', 'bottom', 'left'].map((placement) => (
    <OverlayTrigger
      key={placement}
      placement={placement}
      overlay={
        <Tooltip id={`tooltip-${placement}`}>
          Tooltip on <strong>{placement}</strong>.
        </Tooltip>
      }
    >
      <Button variant="secondary">Tooltip on {placement}</Button>
    </OverlayTrigger>
  ))}

[kyletsang]

Can you put together a minimal reproduction on code sandbox? The docs snippet is working so there might be something else in your code that's causing the issue?

[jas-per]

This is probably caused by using preact instead of react - just ran into a similar issue while testing to upgrade react-bootstrap from 1.6.4 to 2.0.2

From a quick glance I'd say the reason might be the use of portals for the overlay components - preact does not implement a synthetic event system for size and performance reasons (https://preactjs.com/guide/v10/differences-to-react/#main-differences) so events don't bubble through portals

Reproduction: https://codesandbox.io/s/testcase-react-bootstrap-with-preact-qice4 react-bootstrap 1.6.4 works as intended with preact, if you switch to 2.0.2 the page starts to freeze

There seem to be similar issues with other ui-toolkits and preact (eg https://github.com/preactjs/preact/issues/3297) so its probably best to solve this within preact, unless it would be a huge problem to do so eg because of the missing synthetic event system.

Will raise an issue with preact as well to get their opinion but also looking forward to hear your thoughts on this issue - would it be feasible to return the overlay back to 1.6 behavior to make preact work again with react-bootstrap or are there more parts of 2.0 that would need to be addressed?

[kyletsang]

Looks like this is fixed in preact