stuartjnelson / badger-accordion

An accessible vanilla JS accordion with extensible API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`.open()` method behaves oddly when user clicks

lsavage92 opened this issue · comments

Expected Behavior

Use .open() to open a specific panel and then I expect the user to be able to click that header to close it.

Current Behavior

Using .open() on load causes a few issues:

  1. The panel cannot be closed now via clicking behavior.
  2. When combined with the openMultiplePanels option, if the user clicks on a different header than the opened one it will close the panel that was previously opened with the .open() method.

Failure Information (for bugs)

I looked a bit at the code and it looks like for .open() vs the openHeadersOnLoad option use different internal methods to achieve their goal. .open() uses the toggle method and openHeadersOnLoad actually changes the state. I suspect they should both be affecting the state.

Steps to Reproduce

After initializing an accordion, use the .open() method to open a specific panel. Once rendered, try to click the header to close the open panel. It should not close nor throw any errors.

Context

  • Operating System: Mac OSX Mojave 10.14
  • Browser/s & version/s: Chrome 70.0.3538.77
  • NPM version: 5.6.0
  • Node version: 9.10.0

Hi @lsavage92,

Thanks so much for this EXCELLENT issue ticket. I'll reply properly tomorrow but I think I've fixed it with the latest release 1.1.3.

Hi @lsavage92,

Apologies for my brief reply the other day. Are you able to confirm that the plugin now works as you suspect? The issue was as you pointed out that open() wasn't updating the state as the _openHeadersOnLoad() and handleClick() method do. I made a little change to both open() and close() methods so that they now can optionally update the state and therefore now work as expected. I'll leave this ticket open for a few weeks incase you have any other questions.

Hi @lsavage92,

Since I haven't heard back from you I am now going to close this ticket. If you do have any issues/feedback feel free to add a comment.