diff --git a/e2e/suite1/specs/select-focus.spec.ts b/e2e/suite1/specs/select-focus.spec.ts new file mode 100644 index 00000000000..2dd98f86faa --- /dev/null +++ b/e2e/suite1/specs/select-focus.spec.ts @@ -0,0 +1,40 @@ +import { e2e } from '@grafana/e2e'; + +e2e.scenario({ + describeName: 'Select focus/unfocus tests', + itName: 'Tests select focus/unfocus scenarios', + addScenarioDataSource: false, + addScenarioDashBoard: false, + skipScenario: false, + scenario: () => { + e2e.flows.openDashboard('5SdHCadmz'); + e2e.pages.Dashboard.Toolbar.toolbarItems('Dashboard settings').click(); + + e2e.components.FolderPicker.container() + .should('be.visible') + .within(() => { + e2e.components.Select.input() + .should('be.visible') + .click(); + + e2e.components.Select.option() + .should('be.visible') + .first() + .click(); + + e2e.components.Select.input() + .should('be.visible') + .should('have.focus'); + }); + + e2e.pages.Dashboard.Settings.General.title().click(); + + e2e.components.FolderPicker.container() + .should('be.visible') + .within(() => { + e2e.components.Select.input() + .should('be.visible') + .should('not.have.focus'); + }); + }, +}); diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index e02f4996444..781a809367e 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -98,6 +98,7 @@ export const Components = { }, Select: { option: 'Select option', + input: () => 'input[id*="react-select-"]', }, FieldConfigEditor: { content: 'Field config editor content', @@ -105,4 +106,7 @@ export const Components = { OverridesConfigEditor: { content: 'Field overrides editor content', }, + FolderPicker: { + container: 'Folder picker select container', + }, }; diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index bfb6feb57ef..d02c4c346cc 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -49,6 +49,7 @@ export const Pages = { sectionItems: (item: string) => `Dashboard settings section item ${item}`, saveDashBoard: 'Dashboard settings aside actions Save button', saveAsDashBoard: 'Dashboard settings aside actions Save As button', + title: 'Dashboard settings page title', }, Variables: { List: { diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 724d43f6649..8e6e0e4d9ce 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -231,22 +231,7 @@ export function SelectBase({ components={{ MenuList: SelectMenu, Group: SelectOptionGroup, - ValueContainer: (props: any) => { - const { menuIsOpen } = props.selectProps; - if ( - Array.isArray(props.children) && - Array.isArray(props.children[0]) && - maxVisibleValues !== undefined && - !(showAllSelectedWhenOpen && menuIsOpen) - ) { - const [valueChildren, ...otherChildren] = props.children; - const truncatedValues = valueChildren.slice(0, maxVisibleValues); - - return ; - } - - return ; - }, + ValueContainer, Placeholder: (props: any) => (
{ - const theme = useTheme(); - const styles = getSelectStyles(theme); - const { children, isMulti } = props; - return
{children}
; -}; +class UnthemedValueContainer extends React.Component { + render() { + const { children } = this.props; + const { selectProps } = this.props; + + if ( + selectProps && + Array.isArray(children) && + Array.isArray(children[0]) && + selectProps.maxVisibleValues !== undefined && + !(selectProps.showAllSelectedWhenOpen && selectProps.menuIsOpen) + ) { + const [valueChildren, ...otherChildren] = children; + const truncatedValues = valueChildren.slice(0, selectProps.maxVisibleValues); + + return this.renderContainer([truncatedValues, ...otherChildren]); + } + + return this.renderContainer(children); + } + + renderContainer(children?: ReactNode) { + const { isMulti, theme } = this.props; + const styles = getSelectStyles(theme); + const className = cx(styles.valueContainer, isMulti && styles.valueContainerMulti); + return
{children}
; + } +} + +export const ValueContainer = withTheme(UnthemedValueContainer); diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx index 6d19a8c3996..6315b5094fa 100644 --- a/public/app/core/components/Select/FolderPicker.tsx +++ b/public/app/core/components/Select/FolderPicker.tsx @@ -1,9 +1,10 @@ import React, { PureComponent } from 'react'; +import { debounce } from 'lodash'; import { AsyncSelect } from '@grafana/ui'; import { AppEvents, SelectableValue } from '@grafana/data'; -import { debounce } from 'lodash'; -import appEvents from '../../app_events'; import { getBackendSrv } from '@grafana/runtime'; +import { selectors } from '@grafana/e2e-selectors'; +import appEvents from '../../app_events'; import { contextSrv } from 'app/core/services/context_srv'; import { DashboardSearchHit } from 'app/features/search/types'; @@ -148,7 +149,7 @@ export class FolderPicker extends PureComponent { const { enableCreateNew, useNewForms } = this.props; return ( - <> +
{useNewForms && ( {
)} - + ); } } diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap index b2b3a899396..3c42ca8d248 100644 --- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap +++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FolderPicker should render 1`] = ` - +
@@ -26,5 +28,5 @@ exports[`FolderPicker should render 1`] = ` />
-
+ `; diff --git a/public/app/features/dashboard/components/DashboardSettings/template.html b/public/app/features/dashboard/components/DashboardSettings/template.html index dd03b74a372..32211442276 100644 --- a/public/app/features/dashboard/components/DashboardSettings/template.html +++ b/public/app/features/dashboard/components/DashboardSettings/template.html @@ -19,7 +19,7 @@
-

+

General