[C-892] Fix multiple menus open at once #1889

amendelsohn · 2022-09-09T20:44:55Z

Description

Extension of #1698

Fixes several other occurrences of the same bug.
Also addresses the same issue in NEW_TABLES feature flag's new tables.

From @sddioulde

The issue was that there was an event.stopPropagation as the click event from the the kebab menu in the track/playlist was bubbling up. This was there so that the underlying track does not play/pause on kebab menu click. However, because the click event stopped bubbling up, the logic for the click outside of already open menus would not trigger, leaving those menus open.
This PR does not stop the click event from bubbling up to the document, and it prevents the play/pause track if the click target is from the kebab menu.

Note that we should continue to stop propagation for clicks that cause navigation, particularly title and artist page links on a track that would otherwise play/pause onClick for the row/card. This ensures we don't play/pause the track on top of the intended navigation.

Dragons

No dragons. In the future, we should avoid stopping event propagation except in necessary cases, since it can cause problems outside the component's own scope.

How Has This Been Tested?

Tested locally on staging data by clicking on menus across the app
https://www.loom.com/share/b961c35db62040108becc73880288454

How will this change be monitored?

N/A

Feature Flags

We should watch this as NEW_TABLES goes out.

amendelsohn · 2022-09-09T20:55:31Z

packages/web/src/components/tracks-table/TracksTable.js

@@ -39,25 +40,28 @@ export const alphaSortFn = function (a, b, aKey, bKey) {
  return a.toLowerCase() > b.toLowerCase() ? 1 : -1
 }

+const allRowsActionButtonRefs = []


Ideally we'd index these or tie them directly to their own row, but because these are draggable, I wasn't confident that would work consistently. I think this will be low enough overhead since it's only on clicks within the table, but maybe worth thinking about.

raymondjacobson

one Q, otherwise looks great!

raymondjacobson · 2022-09-09T20:56:57Z

packages/web/src/components/tracks-table/TracksTable.js

@@ -39,25 +40,28 @@ export const alphaSortFn = function (a, b, aKey, bKey) {
  return a.toLowerCase() > b.toLowerCase() ? 1 : -1
 }

+const allRowsActionButtonRefs = []


how often do we call favoriteButtonCell? if it's part of a render cycle, couldn't allRowActionButtonRefs grow infinitely?

good question. I'll see if it grows over multiple renders

yeah this is a problem. It adds them on every render. Gonna try to make it key off trackid or something

fixed on the latest which keys the stored refs by the table row's key

audius-infra · 2022-09-09T21:08:06Z

Preview this change https://demo.audius.co/amendel-multiple-menu-fix

rickyrombo · 2022-09-09T21:45:27Z

packages/web/src/components/tracks-table/TracksTable.js

 const favoriteButtonCell = (val, record, props) => {
  const deleted = record.is_delete || !!record.user?.is_deactivated
  const isOwner = record.owner_id === props.userId
  if (deleted || isOwner) return null
+
+  const favoriteButtonRef = createRef()
+  allRowsActionButtonRefs.push(favoriteButtonRef)


Instead of manually creating refs like this, we could possibly use some sneaky callback refs forwarded from the props here...

So the TracksTable would define a callback that takes an element and an index, which then gets passed on props here, and then this defines the ref on the button as (element) => theCallblackRef(element, val) (or record.track_id), not sure what's best to key on here).

That could help decouple these and get rid of the need of the global?

https://reactjs.org/docs/refs-and-the-dom.html#callback-refs for more info on callback refs

Yeah good idea! I was thinking about trying this, but was focused on getting it working the simplest way first. I'll take a quick pass and see if it's easy and retains the behavior

rickyrombo · 2022-09-09T21:46:22Z

packages/web/src/components/card/desktop/Card.tsx

+  const menuActionsRef = useRef<HTMLDivElement>(null)
+  const handleClick = useCallback(
+    (e) => {
+      if (isDescendantElementOf(e?.target, menuActionsRef.current)) return


Nice, love the isDescendentElementOf usage!

packages/web/src/components/tracks-table/TracksTable.js

audius-infra · 2022-09-09T22:44:33Z

Preview this change https://demo.audius.co/amendel-multiple-menu-fix

audius-infra · 2022-09-10T02:22:02Z

Preview this change https://demo.audius.co/amendel-multiple-menu-fix

[3394a06] Fix infinite lineup fetch (#1940) Sebastian Klingler [19381a3] [C-296] Persist stack history across bottom tabs (#1939) Dylan Jeffers [6705cb5] [C-1118] Send tip -> send audio (#1937) nicoback2 [9c63ab7] [C-1023] [C-1039] Sync account entropy from webview and improve splashscreen (#1938) Sebastian Klingler [e3d9cc4] [C-1064] Show "You're Offline" component on mobile (#1936) Andrew Mendelsohn [16a8b96] [C-1113] Improve native render performance (#1935) Dylan Jeffers [7f4ede3] Fix broken signup on web (#1934) Michael Piazza [2373ae0] fix rewards claim (#1933) nicoback2 [54dcd64] [C-1107] Fix push to sign in when identity is down (#1931) Raymond Jacobson [43222ee] [C-1091] Improve selector performance (#1932) Dylan Jeffers [eee12c7] Add request pagination for favorites for the new table (#1850) Kyle Shanks [5d43c12] upgrade sdk (#1929) nicoback2 [2fd28e4] [Reloaded] No more useDispatchWeb, messages C-1089 (#1927) nicoback2 [6fc8709] Merge pull request #1928 from AudiusProject/jn-exporter-default Johannes Naylor [24d9d3b] [C-838] Fix desktop update banner flow (#1719) Raymond Jacobson [aace104] remove console exporter and change default to undefined Johannes Naylor [81e9a4d] Detach mobile reachability state from non existent webview C-938 (#1913) nicoback2 [9c6c067] Merge pull request #1878 from AudiusProject/jn-con-385 Johannes Naylor [5f335bb] Update mobile readme install instructions (#1926) Dylan Jeffers [8469883] [C-907] Fix react native push notifications (#1922) Raymond Jacobson [543b013] Fix pull to refresh (#1925) Sebastian Klingler [370088e] Fix issue with using `accountUser` handle (#1924) Sebastian Klingler [5a496fa] fix more by artist lineup (#1921) nicoback2 [cab5181] downgrade node Johannes Naylor [5602eab] pin deps Johannes Naylor [7a95b3f] Fix infinite 404 (#1920) Sebastian Klingler [8cdc9b9] [C-1060] Fix /check page (#1919) Raymond Jacobson [375c5dd] [PAY-578] Fade in socials on mobile user screen (#1905) Reed [2b1cc7f] Wait for libs before signing data (#1918) Sebastian Klingler [d06e2c1] update env var Johannes Naylor [5efd985] [C-1031] Improve profile expand section touch target (#1911) Dylan Jeffers [f327636] [C-1053] Fix ios status color in dark/light modes (#1917) Dylan Jeffers [7a167b6] [C-1050] Fix profile search crash (#1916) Dylan Jeffers [32b8c82] [C-1057] Fix blank edit-profile screen (#1915) Dylan Jeffers [406e6c0] no more useselector web (#1914) nicoback2 [98ed3f6] [C-1029] Fix pull-to-refresh (#1912) Dylan Jeffers [7582351] Migrate useGetFirstOrTopSupporter (#1910) Sebastian Klingler [b9e4e41] add env vars Johannes Naylor [44060c1] remove telemetry Johannes Naylor [53483ef] remove telemetry Johannes Naylor [ae57626] remove telemetry Johannes Naylor [0515567] more telemetry Johannes Naylor [2da8c47] install Johannes Naylor [379af75] Merge branch 'main' into jn-con-385 merge main Johannes Naylor [d0deea6] changing things around Johannes Naylor [22288b1] [C-1012] Remove web build from mobile build (#1907) Raymond Jacobson [8572ee3] [C-1027] Improve bottom-bar perf (#1909) Dylan Jeffers [a41d536] the goods Johannes Naylor [128aa9b] move the instrumentation to the audiusBackend Johannes Naylor [a27c976] Fix profile clearing (#1908) Dylan Jeffers [75e6eec] Remove react-nil and NATIVE_NAVIGATION (#1906) Dylan Jeffers [ebbb561] Update social features to use entity manager (#1853) Isaac Solo [99952d1] [C-990] Nativefy oauth (#1885) Raymond Jacobson [c149204] Fix failing CI init (#1904) Sebastian Klingler [d436adb] [C-1009] Fix misaligned social icons (#1901) Dylan Jeffers [d21d5d4] [C-1020] Remove web pushes (#1902) Dylan Jeffers [600f673] [C-711] Change useSize to useMeasure in ProfileBio (#1903) Reed [497da98] stuff Johannes Naylor [7f4a144] try a bunch of things Johannes Naylor [66995fa] Clean up some more instances of useSelectorWeb/useDispatchWeb (#1900) Sebastian Klingler [3383135] Nativefy remixes screen (#1887) nicoback2 [8b0d1e5] Fix edit profile screen (#1899) Sebastian Klingler [fb3c189] [C-996] Remove NATIVE_MOBILE references (#1895) Dylan Jeffers [bb0a03e] Fix lineup state persisting across profile screens sliptype [5150a58] [PAY-626] Change playlist+tip challenges copy and emoji (#1897) Reed [e816c64] [PAY-625] Playlist challenge optimistic claiming (#1891) Reed [f3c02b6] [C-892] Fix multiple menus open at once (#1889) Andrew Mendelsohn [192c669] run setupTracing Johannes Naylor [00f3951] add tracer Johannes Naylor

amendelsohn added 9 commits September 8, 2022 18:12

opening an actions menu now closes all others

544f780

apply for all sizes

66ccd5d

todos for fixing the tracks table

94c1c53

fixed TracksTable default usages

86953db

Fix artist dashbaord page

dcfadf7

fix new feature flagged tables

9d14755

use existing isDescendantElementOf util

2f10f00

got it backwards

89b43de

check all the table buttons' refs; could do better

6b554be

amendelsohn added the bug Something isn't working label Sep 9, 2022

amendelsohn requested review from raymondjacobson, rickyrombo and sddioulde September 9, 2022 20:44

pull-request-size bot added the size/L label Sep 9, 2022

typecheck fix

0af0f40

amendelsohn commented Sep 9, 2022

View reviewed changes

raymondjacobson approved these changes Sep 9, 2022

View reviewed changes

rickyrombo approved these changes Sep 9, 2022

View reviewed changes

prevent ballooning of the refs list

a3294f7

scope actionButtonRefs to the Table instance

66d8510

rickyrombo approved these changes Sep 10, 2022

View reviewed changes

sddioulde approved these changes Sep 12, 2022

View reviewed changes

amendelsohn merged commit f3c02b6 into main Sep 12, 2022

amendelsohn deleted the amendel-multiple-menu-fix branch September 12, 2022 15:31

AudiusProject deleted a comment from linear bot Sep 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-892] Fix multiple menus open at once #1889

[C-892] Fix multiple menus open at once #1889

amendelsohn commented Sep 9, 2022

amendelsohn Sep 9, 2022

raymondjacobson left a comment

raymondjacobson Sep 9, 2022

amendelsohn Sep 9, 2022

amendelsohn Sep 9, 2022

amendelsohn Sep 9, 2022

audius-infra commented Sep 9, 2022

rickyrombo Sep 9, 2022

rickyrombo Sep 9, 2022

amendelsohn Sep 9, 2022

rickyrombo Sep 9, 2022

audius-infra commented Sep 9, 2022

audius-infra commented Sep 10, 2022

[C-892] Fix multiple menus open at once #1889

[C-892] Fix multiple menus open at once #1889

Conversation

amendelsohn commented Sep 9, 2022

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Feature Flags

Choose a reason for hiding this comment

raymondjacobson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Sep 9, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Sep 9, 2022

audius-infra commented Sep 10, 2022