[PLAY-1497] Fix Collapsible Glitchiness When State Changes Quickly (#…

…3664)

**What does this PR do?**

- Fix a glitch where the "open" state of a collapsible mistakenly has
class styles where it is "closed".
- The bug shows up when you toggle open, close, and then open quickly.
The close function has a timeout of 300 milliseconds to remove the
'is-visible' class. If you open before this timeout is finished, the
'is-visible' class is removed by the close function's timeout.
- It doesn't show in Rails because there is a [toggle
function](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_collapsible/index.js#L73)
that looks for the 'is-visible' class. React does it differently and
uses
[context](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx#L25).

**Screenshots:**
Take a look at the videos posted in
[PLAY-1497](https://runway.powerhrg.com/backlog_items/PLAY-1497) to see
the glitch.

**How to test?**
1. Go to the prod Playbook website:
https://playbook.powerapp.cloud/kits/collapsible/react
2. Reproduce the glitchiness by clicking the collapsible three times
quickly in a row (open, close, open)
3. Now, in the test environment, go to /kits/collapsible/react
4. Click three times quickly in a row. The collapsible should be "open"
and the height should be correct.
5. Test that the animation works as expected for opening and closing if
you don't click quickly in a row (should be smooth and take .3 seconds).

#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.

playbook/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -6,6 +6,10 @@ export const showElement = (elem: HTMLElement) => {
   elem.style.overflow = "hidden"
   // Once the transition is complete, remove the inline max-height so the content can scale responsively
   window.setTimeout(() => {
+    // If a user toggles multiple times quickly in a row, 'is-visible' can be removed by hideElement's timeout
+    if (!elem.classList.contains('is-visible')) {
+      elem.classList.add('is-visible')
+    }
     elem.style.height = '';
     elem.style.overflow = "visible"
   }, 300);