Table component: adding click event on expandable table rows #2127
Conversation
🦋 Changeset detectedLatest commit: 14465d8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
Fjerner unntaket for når raden er åpen, slik at pointer-cursor vises også når brukeren skal lukke raden. Co-authored-by: Vegard Haugstvedt <it.vegard@gmail.com>
| </Table> | ||
| ); | ||
| }, | ||
| play: async ({ canvasElement, step }) => { |
There was a problem hiding this comment.
Laget en interaktiv demo (kan ses i storybook) for et av problemene som har stoppet oss fra denne oppdateringen tidligere:
I tilfeller der man har andre interaktive elementer som eks lenker, checkboxer eller knapper ønsker vi at man ikke skal åpne raden ved klikk på dem. Dette kan kanskje også videreføres til at raden ikke skal åpnes hvis man ønsker å eks kopiere noe tekst, men ikke sikker på den.
Arbeidet stoppet litt opp med å finne en god løsning på dette, men kan hende alt man trenger er å sjekke document.activeElement 🤞 Vært helt mega å finne en god løsning på dette da jeg vet mange ønsker seg denne featuren 🙌
There was a problem hiding this comment.
Takk for eksemplet.
Eventet vil per default spre seg videre ja. Dersom de interaktive elementene skal hindre eventet til å gå videre til raden må det ansvaret være på dem. Jeg la til en event.stopPropagation i click-handlere på både Button og Checkbox i eksempelet.
Jeg kommenterte også ut "play" bitten slik at alerts ikke kjører med en gang.
There was a problem hiding this comment.
🐡 Update: Har lagt til en ny commit igjen nå, hvor jeg fjerner stopPropagation fra elementene i storyen, og istedet legger til logikk på selve ExpandableRow for å kun ekspande ved behov (Dvs når den registrerer klikk på selve raden, eller ekspandable-knappen, men ikke ellers). Se linje 73-89.
🍄 Det kan være en mer robust løsning som gjør at konsumentene ikke behøver å forholde seg til propagation i det hele tatt.
… row itself or the expandable button
|
|
||
| const onRowClick = (e) => { | ||
| if ( | ||
| e.target.nodeName === "TD" || |
There was a problem hiding this comment.
Selv om vi ikke har noen kodeeksempler på det (og stylingen for det virker litt "off"), så skulle jeg gjerne ønsket at vi sjekker for "TH" i tillegg til "TD", i tilfelle noen bruker radoverskrifter. Mest for å forhindret at vi glemmer dette om man tar i bruk radoverskrifter i fremtiden.
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Description
Table component: adding click event on expandable table rows
Ref Slack tråd https://nav-it.slack.com/archives/C7NE7A8UF/p1685454962205769)
Change summary