Skip to content

Commit

Permalink
fix(core): compute open state on focus with shouldPanelOpen (#456)
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoischalifour
francoischalifour authored Feb 19, 2021
1 parent ab77195 commit dd28098
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 61 deletions.
1 change: 1 addition & 0 deletions packages/autocomplete-core/src/__tests__/debug.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ describe('debug', () => {
const { getInputProps } = createAutocomplete({
debug: true,
openOnFocus: true,
shouldPanelOpen: () => true,
onStateChange,
});
const inputElement = document.createElement('input');
Expand Down
1 change: 1 addition & 0 deletions packages/autocomplete-core/src/__tests__/getEnvironmentProps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ describe('getEnvironmentProps', () => {
formElement,
} = createPlayground(createAutocomplete, {
openOnFocus: true,
shouldPanelOpen: () => true,
});
const panelElement = document.createElement('div');

Expand Down
1 change: 1 addition & 0 deletions packages/autocomplete-core/src/__tests__/getFormProps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ describe('getFormProps', () => {
{
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
initialState: {
isOpen: true,
},
Expand Down
206 changes: 148 additions & 58 deletions packages/autocomplete-core/src/__tests__/getInputProps.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1514,80 +1514,164 @@ describe('getInputProps', () => {
});

describe('set isOpen', () => {
test('to false when openOnFocus is false and the query empty', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
describe('shouldPanelOpen returns false', () => {
test('to false when openOnFocus is false and the query empty', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
});

inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});

inputElement.focus();
test('to true when the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
initialState: {
query: 'i',
},
});

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});
inputElement.focus();

test('to true when the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
initialState: {
query: 'i',
},
expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});

inputElement.focus();
test('to true when openOnFocus is true', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
});

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
});
inputElement.focus();

test('to true when openOnFocus is true', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});

inputElement.focus();
test('to true when openOnFocus is true and the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
initialState: {
query: 'i',
},
});

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});
});

test('to true when openOnFocus is true and the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
initialState: {
query: 'i',
},
describe('shouldPanelOpen returns true', () => {
test('to false when openOnFocus is false and the query empty', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
shouldPanelOpen: () => true,
});

inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: false,
}),
})
);
});

inputElement.focus();
test('to true when the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
shouldPanelOpen: () => true,
initialState: {
query: 'i',
},
});

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
});

test('to true when openOnFocus is true', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
});

inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
});

test('to true when openOnFocus is true and the query is set', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
initialState: {
query: 'i',
},
});

inputElement.focus();

expect(onStateChange).toHaveBeenLastCalledWith(
expect.objectContaining({
state: expect.objectContaining({
isOpen: true,
}),
})
);
});
});
});
});
Expand Down Expand Up @@ -1621,6 +1705,7 @@ describe('getInputProps', () => {
debug: true,
defaultActiveItemId: 1,
openOnFocus: true,
shouldPanelOpen: () => true,
});

inputElement.focus();
Expand All @@ -1647,6 +1732,7 @@ describe('getInputProps', () => {
onStateChange,
defaultActiveItemId: 1,
openOnFocus: true,
shouldPanelOpen: () => true,
});

inputElement.focus();
Expand Down Expand Up @@ -1680,6 +1766,7 @@ describe('getInputProps', () => {
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
initialState: {
isOpen: true,
},
Expand Down Expand Up @@ -1770,6 +1857,7 @@ describe('getInputProps', () => {
const onStateChange = jest.fn();
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
shouldPanelOpen: () => true,
initialState: {
query: 'i',
},
Expand All @@ -1796,6 +1884,7 @@ describe('getInputProps', () => {
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
});

inputElement.focus();
Expand All @@ -1820,6 +1909,7 @@ describe('getInputProps', () => {
const { inputElement } = createPlayground(createAutocomplete, {
onStateChange,
openOnFocus: true,
shouldPanelOpen: () => true,
});

inputElement.focus();
Expand Down
10 changes: 8 additions & 2 deletions packages/autocomplete-core/src/__tests__/openOnFocus.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ describe('openOnFocus', () => {

test('opens panel on reset', () => {
const onStateChange = jest.fn();
const { formElement } = setupTest({ onStateChange });
const { formElement } = setupTest({
onStateChange,
shouldPanelOpen: () => true,
});

formElement.reset();

Expand Down Expand Up @@ -94,7 +97,10 @@ describe('openOnFocus', () => {

test('opens panel without query', () => {
const onStateChange = jest.fn();
const { inputElement } = setupTest({ onStateChange });
const { inputElement } = setupTest({
onStateChange,
shouldPanelOpen: () => true,
});

inputElement.focus();

Expand Down
4 changes: 3 additions & 1 deletion packages/autocomplete-core/src/stateReducer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,9 @@ export const stateReducer: Reducer = (state, action) => {
return {
...state,
activeItemId: action.props.defaultActiveItemId,
isOpen: action.props.openOnFocus || Boolean(state.query),
isOpen:
(action.props.openOnFocus || Boolean(state.query)) &&
action.props.shouldPanelOpen({ state }),
};
}

Expand Down

0 comments on commit dd28098

Please sign in to comment.