Skip to content

Commit

Permalink
[1.x] Fix inability to click dropdown content in React version (#153)
Browse files Browse the repository at this point in the history
* Fix inability to click dropdown content in React version

The click-away element was covering the content, even though the content
had a higher z-index, because the Transition component wrapped the
content in a `<div>` that started a new stacking context due to the
transform and opacity classes on it.

* Linting
  • Loading branch information
jessarcher authored May 30, 2022
1 parent 9b6bab5 commit 6f6a258
Showing 1 changed file with 8 additions and 11 deletions.
19 changes: 8 additions & 11 deletions stubs/inertia-react/resources/js/Components/Dropdown.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useContext } from 'react';
import React, { useState, useContext, Fragment } from 'react';
import { Link } from '@inertiajs/inertia-react';
import { Transition } from '@headlessui/react';

Expand Down Expand Up @@ -50,6 +50,7 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
return (
<>
<Transition
as={Fragment}
show={open}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
Expand All @@ -58,16 +59,12 @@ const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-whit
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
{open && (
<div
className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
onClick={() => setOpen(false)}
>
<div className={`rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses}>
{children}
</div>
</div>
)}
<div
className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
onClick={() => setOpen(false)}
>
<div className={`rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses}>{children}</div>
</div>
</Transition>
</>
);
Expand Down

0 comments on commit 6f6a258

Please sign in to comment.