enso/app/dashboard/docs/browser_specific_behavior.md
somebody1234 ebf4cd5c1f
Inline modules in app/ide-desktop/ (#10305)
- Remove unnecessary modules
- Remove `ts-plugin-namespace-auto-import` as it was a workaround to use the non-conventional `import *` convention
- Remove `esbuild-plugin-copy-directories` as it is unuse
- Inline modules that are only ever used once
- Inline `project-manager-shim` into `gui2` - it is only used during `gui2`'s dev mode
- Inline `content-config` into `client`
- Flatten `app/ide-desktop/lib/` to `app/ide-desktop/`
- Flatten `app/ide-desktop/lib/dashboard/` to `app/dashboard/`

# Important Notes
- As mentioned above, all remaining modules have been moved up from `app/ide-desktop/lib/` to `app/ide-desktop/`. It's not ideal but I'd rather hold off on moving them anywhere else before we have a consensus on what should go where.
- (That is to say, this may not be the final directory structure - but I figure it's fine to get *something* done so that hopefully the rest of the restructuring is simpler.)
2024-07-17 09:10:42 +00:00

1.6 KiB

Browser-specific behavior

This document details behavior that is inconsistent between browsers and needs to be worked around.

List of inconsistent behaviors

Drag event missing coordinates

Firefox sets MouseEvent.pageX and MouseEvent.pageY to 0 for drag events.

Fix

Pass the drag event handlers to dragover event as well, and wrap all drag event handlers in:

if (event.pageX !== 0 || event.pageY !== 0) {
	// original body here
}
```

#### Affected files

- [`DragModal.tsx`](../src/modals/DragModal.tsx)

### Drag event propagation in text inputs

Text selection in text inputs DO NOT WORK on Firefox, when the text input is a
child of an element with `draggable="true"`.
See [Firefox bug 800050].
To solve this problem, use `useDraggable` from
[`dragAndDropHooks.ts`] on ALL elements that MAY contain a text input.

[Firefox bug 800050]: https://bugzilla.mozilla.org/show_bug.cgi?id=800050

#### Fix

Merge `useDraggable` from [`dragAndDropHooks.ts`] on ALL elements that MAY
contain a text input.

It is recommended to use `aria.mergeProps` to combine these props with existing
props.

```tsx
import * as dragAndDropHooks from "#/hooks/dragAndDropHooks.ts";

const draggableProps = dragAndDropHooks.useDraggable();

return <div {...draggableProps}></div>;

Affected browsers

  • Firefox (all versions)

Affected files