enso/app/gui/docs/browser_specific_behavior.md
Adam Obuchowicz 4a249688e8
Unify Frontend App (#11287)
Fixes #10668
Fixes #8484

Summary of changes:
* `gui2` and `dashboard` are merged to `gui` directory. Various configs were merged (package.json, playwrigth, TS...). The src and e2e directories are split to `dashboard` and `project-view` for now.
* E2E tests run two servers on different ports. The tests are organized in projects. This is also to be changed soon, as we plan to [use better mocking in GUI/ProjectView](#9726)
* ESlint configs were merged to central `eslint.config.mjs`, and that file was moved to repository root. We kept the dashboard lints, but they can be relaxed. The dashboard code was changed to meet GUI lints.
* Also, the versions of linter plugins were bumped, and code fixed.
* The ide-desktop/client no longer has `dashboard` dependency - the only type used there was moved to common package.
* `common` package moved to `app`.
2024-10-11 18:23:02 +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