self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-09 08:56:07 +02:00
Code Issues Releases Activity

Fixed bug with scroll jumping when the card is opened: (#2477)

Browse Source 
- avoid remounting of `ScrollingComponent` for each render of `Kanban` component
  - property `autoFocus` set to false for `CalculationOptions` because it triggers `blur` even for the button in Jest tests and closes the menu
  - snapshots for tests with `CalculationOptions` updated
This commit is contained in:
kamre 2022-03-15 14:15:04 +03:00 committed by GitHub
parent 10427afa24
commit c317ece642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 33 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/src/components/calculations/__snapshots__/options.test.tsx.snap
View File

@ -10,18 +10,9 @@ exports[`components/calculations/Options should match snapshot 1`] = `
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
Select is focused , press Down to open the menu,
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused css-1s59geg-Control"
class="CalculationOptions__control css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -45,7 +36,7 @@ exports[`components/calculations/Options should match snapshot 1`] = `
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -65,7 +56,7 @@ exports[`components/calculations/Options should match snapshot 1`] = `
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
@ -92,18 +83,9 @@ exports[`components/calculations/Options should match snapshot menu open 1`] = `
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
2 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused CalculationOptions__control--menu-is-open css-1s59geg-Control"
class="CalculationOptions__control CalculationOptions__control--menu-is-open css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -127,7 +109,7 @@ exports[`components/calculations/Options should match snapshot menu open 1`] = `
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -147,7 +129,7 @@ exports[`components/calculations/Options should match snapshot menu open 1`] = `
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"

2
webapp/src/components/calculations/options.tsx
View File

@ -191,7 +191,7 @@ const CalculationOptions = (props: BaseCalculationOptionProps): JSX.Element => {
isSearchable={false}
components={{DropdownIndicator, ...(props.components || {})}}
defaultMenuIsOpen={props.menuOpen}
autoFocus={true}
autoFocus={false}
formatOptionLabel={(option: Option, meta) => {
return meta.context === 'menu' ? optionLabelString(option, intl) : optionDisplayNameString(option, intl)
}}

17
webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
View File

@ -336,18 +336,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
7 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused CalculationOptions__control--menu-is-open css-1s59geg-Control"
class="CalculationOptions__control CalculationOptions__control--menu-is-open css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -371,7 +362,7 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -391,7 +382,7 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"

17
webapp/src/components/kanban/calculation/__snapshots__/calculation.test.tsx.snap
View File

@ -40,18 +40,9 @@ exports[`components/kanban/calculation/KanbanCalculation calculations menu open
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
7 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused CalculationOptions__control--menu-is-open css-1s59geg-Control"
class="CalculationOptions__control CalculationOptions__control--menu-is-open css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -75,7 +66,7 @@ exports[`components/kanban/calculation/KanbanCalculation calculations menu open
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -95,7 +86,7 @@ exports[`components/kanban/calculation/KanbanCalculation calculations menu open
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"

51
webapp/src/components/kanban/calculation/__snapshots__/calculationOptions.test.tsx.snap
View File

@ -10,18 +10,9 @@ exports[`components/kanban/calculations/KanbanCalculationOptions base case 1`] =
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
Select is focused , press Down to open the menu,
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused css-1s59geg-Control"
class="CalculationOptions__control css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -45,7 +36,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions base case 1`] =
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -65,7 +56,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions base case 1`] =
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
@ -92,18 +83,9 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with menu open
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
7 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused CalculationOptions__control--menu-is-open css-1s59geg-Control"
class="CalculationOptions__control CalculationOptions__control--menu-is-open css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -127,7 +109,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with menu open
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -147,7 +129,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with menu open
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"
@ -256,18 +238,9 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with submenu op
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
>
<span
id="aria-selection"
/>
<span
id="aria-context"
>
7 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
</span>
</span>
/>
<div
class="CalculationOptions__control CalculationOptions__control--is-focused CalculationOptions__control--menu-is-open css-1s59geg-Control"
class="CalculationOptions__control CalculationOptions__control--menu-is-open css-1s59geg-Control"
>
<div
class="CalculationOptions__value-container CalculationOptions__value-container--has-value css-1mxrbau-ValueContainer"
@ -291,7 +264,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with submenu op
>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-13eygzs-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__clear-indicator css-tpaeio-indicatorContainer"
>
<svg
aria-hidden="true"
@ -311,7 +284,7 @@ exports[`components/kanban/calculations/KanbanCalculationOptions with submenu op
/>
<div
aria-hidden="true"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-1f9iddu-indicatorContainer"
class="CalculationOptions__indicator CalculationOptions__dropdown-indicator css-wpsttr-indicatorContainer"
>
<i
class="CompassIcon icon-chevron-up ChevronUpIcon"

8
webapp/src/components/kanban/kanban.tsx
View File

@ -40,6 +40,10 @@ type Props = {
showCard: (cardId?: string) => void
}
const ScrollingComponent = withScrolling('div')
const hStrength = createHorizontalStrength(Utils.isMobile() ? 60 : 250)
const vStrength = createVerticalStrength(Utils.isMobile() ? 60 : 250)
const Kanban = (props: Props) => {
const {board, activeView, cards, groupByProperty, visibleGroups, hiddenGroups} = props
@ -191,10 +195,6 @@ const Kanban = (props: Props) => {
setShowCalculationsMenu(newShowOptions)
}
const ScrollingComponent = withScrolling('div')
const hStrength = createHorizontalStrength(Utils.isMobile() ? 60 : 250)
const vStrength = createVerticalStrength(Utils.isMobile() ? 60 : 250)
return (
<ScrollingComponent
className='Kanban'