Using a period `.` inside HTML id attributes make the Tour skipping it

[onceLearner]

🐛 Bug Report

If the id attribute of a HTML element includes a period . then trying to targeting that element doesn't work, either it throws an error or it just skips the step.

To Reproduce

Just include a period . inside the id attributes of the target element. example:

<p id="with.period" > element with id including a period . </p>

then trying to use the id as target inside step array :

let steps = [{
target:"#with.period",
content:"content"
}
...
]

Expected behavior

Recognize the element through that id and show it among the steps.

Link to repl or repo (highly encouraged)

I have reproduced the behavior, check:

https://codesandbox.io/s/gallant-bhabha-zs6uvv?file=/src/App.tsx

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

  System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 112.27 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.19.3 - ~/Desktop/node_modules/.bin/npm
  npmPackages:
    react-joyride: ^2.5.3 => 2.5.3 

[gilbarbara]

Hey @onceLearner

This isn't a bug. In a CSS selector the . means a class name. So, #with.point expects to find an element with id with that has a class point. So, you shouldn't be using dots in a selector unless you mean it...

If you still want to use it, you'll need to escape the step's target: #with\\.point

[onceLearner]

Thanks @gilbarbara. Yes we mean the dot ., and actually adding the double backslash \\ is the workaround we were already using. We know Actually Css selector has this behavoir, but meanwhile getElementById would success to find it. Thanks anyway 😇