Merge pull request #10621 from notbakaneko/feature/discussions-unset-…

…scroll-padding-extra-on-sticky-focus Fix page scrolling when typing into new discussions text box
ppy · Oct 6, 2023 · 79a23b8 · 79a23b8
2 parents a5beb1b + 3704f0e
commit 79a23b8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git 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,11 @@ export class Main extends React.PureComponent
     @cache.groupedBeatmaps ?= BeatmapHelper.group _.values(@beatmaps())
 
 
+  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'
+
+
   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
@@ -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
@@ -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) {