xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #763 from vector-im/dbkr/pointer_event_leak

Browse source 
Fix click leaking through to DOM element underneath
This commit is contained in:
David Baker 2022-11-23 10:15:26 +00:00 committed by GitHub
commit 5c735f0936
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/ListBox.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useRef } from "react";
import React, { useCallback, useRef } from "react";
import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
import { ListState } from "@react-stately/list";
import { Node } from "@react-types/shared";
@ -73,6 +73,22 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
ref
);
// Hack: remove the onPointerUp event handler and re-wire it to
// onClick. Chrome Android triggers a click event after the onpointerup
// event which leaks through to elements underneath the z-indexed select
// popover. preventDefault / stopPropagation don't have any effect, even
// adding just a dummy onClick handler still doesn't work, but it's fine
// if we handle just onClick.
// https://github.com/vector-im/element-call/issues/762
const origPointerUp = optionProps.onPointerUp;
delete optionProps.onPointerUp;
optionProps.onClick = useCallback(
(e) => {
origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
},
[origPointerUp]
);
return (
<li
{...optionProps}