Просмотр исходного кода

fix(ui): By default, don't open select menus on focus (#31777)

* fix(ui): Don't open select menu on focus by default

* fix(test): Fix frontend tests

Fix those that failed due to the recent change to react-select's focus behavior (it will no longer open the dropdown upon focus by default).
Vu Luong 3 лет назад
Родитель
Сommit
d12bbce25a

+ 1 - 1
static/app/components/forms/selectControl.tsx

@@ -354,7 +354,7 @@ function SelectControl<OptionType extends GeneralSelectValue = GeneralSelectValu
       isDisabled={props.isDisabled || props.disabled}
       showDividers={props.showDividers}
       options={options || (choicesOrOptions as OptionsType<OptionType>)}
-      openMenuOnFocus={props.openMenuOnFocus === undefined ? true : props.openMenuOnFocus}
+      openMenuOnFocus={props.openMenuOnFocus}
       blurInputOnSelect={!props.multiple && !props.multi}
       closeMenuOnSelect={!(props.multiple || props.multi)}
       hideSelectedOptions={false}

+ 1 - 2
tests/js/spec/components/dashboards/widgetQueryFields.spec.tsx

@@ -164,8 +164,7 @@ describe('WidgetQueryFields', function () {
       userEvent.click(screen.getByText('Add a Column'));
       mountComponent();
       expect(screen.getByText('(Required)')).toBeInTheDocument();
-      userEvent.click(screen.getByText('(Required)'));
-      mountComponent();
+      userEvent.keyboard('a');
       userEvent.click(screen.getByText('assignee'));
       mountComponent();
       expect(screen.getByText('assignee')).toBeInTheDocument();

+ 4 - 1
tests/js/spec/views/projectInstall/issueAlertOptions.spec.jsx

@@ -19,12 +19,15 @@ describe('IssueAlertOptions', function () {
     props = {...baseProps};
   });
 
-  const selectControlVerifier = (wrapper, dataTestId, optionsText) => {
+  const selectControlVerifier = async (wrapper, dataTestId, optionsText) => {
     wrapper
       .find(`[data-test-id="${dataTestId}"] input[id*="react-select"]`)
       .last()
       .simulate('focus');
 
+    await tick();
+    wrapper.update();
+
     expect(
       wrapper.find(`InlineSelectControl[data-test-id="${dataTestId}"] Option`)
     ).toHaveLength(optionsText.length);