better combobox tests

Author: tborychowski

babel.config.json

@@ -1,4 +1,5 @@
 {
+  "env": { "development": { "compact": false } },
   "presets": [
     [ "@babel/preset-env", { "targets": { "node": "current" }} ]
   ]

docs/docs.js

@@ -10589,6 +10589,7 @@ function instance13($$self2, $$props2, $$invalidate2) {
     originalText = inputElement2.value;
     if (showOnFocus)
       open({ type: "navigating" });
+    requestAnimationFrame(() => inputElement2.select());
   }
   function oninput() {
     open({ type: "typing" });
@@ -10598,9 +10599,8 @@ function instance13($$self2, $$props2, $$invalidate2) {
     $$invalidate2(19, newItemName = inputElement2.value);
   }
   function onblur() {
-    if (isSelecting)
-      return;
-    close();
+    if (!isSelecting)
+      close();
   }
   function onListMouseDown() {
     isSelecting = true;

docs/docs.js.map

@@ -1,5 +1,7 @@
 export default {
 	rootDir: './',
+	// 10s - tests are interactive and have to wait for animations & rendering
+	slowTestThreshold: 10,
 	transform: {
 		'^.+\\.svelte$': 'svelte-jester',
 		'^.+\\.js$': 'babel-jest',

docs/ui.css

@@ -31,9 +31,9 @@
 .combobox-list-header,
 .combobox-list-item {
 	height: var(--ui-button-height);
-	display: flex;
+	line-height: var(--ui-button-height);
+	display: block;
 	align-items: center;
-	line-height: 1;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow-x: hidden;

docs/ui.css.map

@@ -391,6 +391,7 @@ function clear () {
 function onfocus () {
 	originalText = inputElement.value;
 	if (showOnFocus) open({ type: 'navigating' });
+	requestAnimationFrame(() => inputElement.select());
 }
 
 
@@ -404,15 +405,7 @@ function oninput () {
 
 
 function onblur () {
-	if (isSelecting) return;
-	close();
-	// if (!inputElement.value) {
-	// 	if (multiselect || opened) return revert();
-	// }
-	// selectSingle();
-	// setTimeout(() => {
-	// 	if (document.activeElement != inputElement) close();
-	// }, 200);
+	if (!isSelecting) close();
 }
 
 

jest.config.js

@@ -1,5 +1,5 @@
 import { render, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
+import { default as userEvent } from '@testing-library/user-event';
 import jest from 'jest-mock';
 
 import { Dialog } from '../src/dialog';

src/input/combobox/Combobox.css

@@ -1,5 +1,5 @@
 import { render, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
+import { default as userEvent } from '@testing-library/user-event';
 import jest from 'jest-mock';
 
 import { Drawer } from '../src/drawer';