fix(lxlweb): expand supersearch on pill click (#1698)

* ignore events on qualifier widget (let clicks reach supersearch.showExpandedSearch)
* update theme extension css
* add test

Author: jesperengstrom

lxl-web/tests/supersearch-lxlweb.spec.ts

@@ -12,6 +12,16 @@ test('click input expands dialog', async ({ page }) => {
 	await expect(dialog).toHaveAttribute('open');
 });
 
+test('clicking a qualifier pill expands dialog', async ({ page }) => {
+	await page.goto(
+		'/find?_q=workCategory%3A"saogf%3AFacklitteratur"+&_limit=20&_offset=0&_sort=&_spell=true'
+	);
+	const dialog = await page.locator('#appbar-lg-search-dialog');
+	await expect(dialog).not.toHaveAttribute('open');
+	await page.getByTestId('supersearch').locator('.atomic').first().click({ force: true });
+	await expect(dialog).toHaveAttribute('open');
+});
+
 test('type & enter performs search', async ({ page }) => {
 	await page.getByTestId('supersearch').getByRole('combobox').fill('hej');
 	await page.keyboard.press('Enter');

packages/supersearch/src/lib/extensions/lxlQualifierPlugin/qualifierDecoration.ts

@@ -41,6 +41,10 @@ class QualifierWidget extends WidgetType {
 			}
 		};
 
+		this.ignoreEvent = () => {
+			return false;
+		};
+
 		const render = view.state.facet(qualifierRenderFacet);
 		if (render) {
 			const result = render(container, this.props);

packages/supersearch/src/lib/extensions/theme.ts

@@ -14,5 +14,8 @@ export const theme = EditorView.theme({
 	},
 	'&.cm-focused .cm-selectionBackground': {
 		background: '#3b82f640!important'
+	},
+	'.cm-selectionBackground': {
+		background: '#3b82f640!important'
 	}
 });