From 1d943646fe674c020149b056e3471151b6fb06dd Mon Sep 17 00:00:00 2001
From: bakaneko <notbakaneko@users.noreply.github.com>
Date: Fri, 6 Oct 2023 19:16:20 +0900
Subject: [PATCH 1/2] unset scroll-padding-top-extra when sticky element gets
focus;
typing into it triggers scrolling into view and scroll-padding doesn't quite behave the way we want to with position sticky
---
resources/js/beatmap-discussions/main.coffee | 5 +++++
resources/js/beatmap-discussions/new-discussion.tsx | 6 +++++-
resources/js/beatmap-discussions/new-review.tsx | 6 +++++-
3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/resources/js/beatmap-discussions/main.coffee b/resources/js/beatmap-discussions/main.coffee
index ae76d11e7e8..4828e6964b8 100644
--- a/resources/js/beatmap-discussions/main.coffee
+++ b/resources/js/beatmap-discussions/main.coffee
@@ -164,6 +164,7 @@ export class Main extends React.PureComponent
currentDiscussions: @currentDiscussions()
innerRef: @newDiscussionRef
mode: @state.currentMode
+ onFocus: @handleNewDiscussionFocus
pinned: @state.pinnedNewDiscussion
setPinned: @setPinnedNewDiscussion
stickTo: @modeSwitcherRef
@@ -357,6 +358,10 @@ export class Main extends React.PureComponent
@cache.groupedBeatmaps ?= BeatmapHelper.group _.values(@beatmaps())
+ handleNewDiscussionFocus: =>
+ document.documentElement.style.removeProperty '--scroll-padding-top-extra'
+
+
jumpToDiscussionByHash: =>
target = parseUrl(null, @state.beatmapset.discussions)
diff --git a/resources/js/beatmap-discussions/new-discussion.tsx b/resources/js/beatmap-discussions/new-discussion.tsx
index fabfeea26ee..52f0db1b862 100644
--- a/resources/js/beatmap-discussions/new-discussion.tsx
+++ b/resources/js/beatmap-discussions/new-discussion.tsx
@@ -45,6 +45,7 @@ interface Props {
currentDiscussions: CurrentDiscussions;
innerRef: React.RefObject<HTMLDivElement>;
mode: DiscussionMode;
+ onFocus?: () => void;
pinned: boolean;
setPinned: (flag: boolean) => void;
stickTo: React.RefObject<HTMLElement>;
@@ -186,7 +187,10 @@ export class NewDiscussion extends React.Component<Props> {
}
};
- private readonly onFocus = () => this.setSticky(true);
+ private readonly onFocus = () => {
+ this.setSticky(true);
+ this.props.onFocus?.();
+ };
@action
private readonly post = (e: React.SyntheticEvent<HTMLElement>) => {
diff --git a/resources/js/beatmap-discussions/new-review.tsx b/resources/js/beatmap-discussions/new-review.tsx
index 79513b29f2e..108a7e1d675 100644
--- a/resources/js/beatmap-discussions/new-review.tsx
+++ b/resources/js/beatmap-discussions/new-review.tsx
@@ -18,6 +18,7 @@ interface Props {
beatmapset: BeatmapsetExtendedJson;
currentBeatmap: BeatmapExtendedJson;
innerRef: React.RefObject<HTMLDivElement>;
+ onFocus?: () => void;
pinned?: boolean;
setPinned?: (sticky: boolean) => void;
stickTo?: React.RefObject<HTMLDivElement>;
@@ -109,7 +110,10 @@ export default class NewReview extends React.Component<Props> {
);
}
- private readonly handleFocus = () => this.setSticky(true);
+ private readonly handleFocus = () => {
+ this.setSticky(true);
+ this.props.onFocus?.();
+ };
@action
private setSticky(sticky: boolean) {
From 75bd610f0fecf00c1a6c378b4fe6ddcdb314a93d Mon Sep 17 00:00:00 2001
From: bakaneko <notbakaneko@users.noreply.github.com>
Date: Fri, 6 Oct 2023 21:04:32 +0900
Subject: [PATCH 2/2] add note about bug
---
resources/js/beatmap-discussions/main.coffee | 1 +
1 file changed, 1 insertion(+)
diff --git a/resources/js/beatmap-discussions/main.coffee b/resources/js/beatmap-discussions/main.coffee
index 4828e6964b8..9e7ec8dad6d 100644
--- a/resources/js/beatmap-discussions/main.coffee
+++ b/resources/js/beatmap-discussions/main.coffee
@@ -359,6 +359,7 @@ export class Main extends React.PureComponent
handleNewDiscussionFocus: =>
+ # Bug with position: sticky and scroll-padding: https://bugs.chromium.org/p/chromium/issues/detail?id=1466472
document.documentElement.style.removeProperty '--scroll-padding-top-extra'