Add selection activation for inputs.

packages/core/src/SelectionClause.js

@@ -26,7 +26,7 @@ export function clausePoint(field, value, {
 }) {
   /** @type {ExprNode | null} */
   const predicate = value !== undefined
-    ? isNotDistinct(field, literal(value))
+    ? isIn(field, [literal(value)])
     : null;
   return {
     meta: { type: 'point' },

packages/inputs/src/Menu.js

@@ -96,6 +96,12 @@ export class Menu extends MosaicClient {
             this.selectedValue(value);
           }
         });
+      } else {
+        // trigger selection activation
+        this.select.addEventListener('pointerenter', evt => {
+          if (!evt.buttons) this.activate();
+        });
+        this.select.addEventListener('focus', () => this.activate());
       }
     }
   }
@@ -118,6 +124,11 @@ export class Menu extends MosaicClient {
     this.select.selectedIndex = this.from ? 0 : -1;
   }
 
+  activate() {
+    // @ts-ignore - activate is only called for a Selection
+    this.selection.activate(clausePoint(this.field, 0, { source: this }));
+  }
+
   publish(value) {
     const { selection, field } = this;
     if (isSelection(selection)) {

packages/inputs/src/Search.js

@@ -77,6 +77,12 @@ export class Search extends MosaicClient {
             this.searchbox.value = value;
           }
         });
+      } else {
+        // trigger selection activation
+        this.searchbox.addEventListener('pointerenter', evt => {
+          if (!evt.buttons) this.activate();
+        });
+        this.searchbox.addEventListener('focus', () => this.activate());
       }
     }
   }
@@ -85,11 +91,20 @@ export class Search extends MosaicClient {
     this.searchbox.value = '';
   }
 
+  clause(value) {
+    const { field, type } = this;
+    return clauseMatch(field, value, { source: this, method: type });
+  }
+
+  activate() {
+    // @ts-ignore - activate is only called for a Selection
+    this.selection.activate(this.clause(''));
+  }
+
   publish(value) {
-    const { selection, field, type } = this;
+    const { selection } = this;
     if (isSelection(selection)) {
-      const clause = clauseMatch(field, value, { source: this, method: type });
-      selection.update(clause);
+      selection.update(this.clause(value));
     } else if (isParam(selection)) {
       selection.update(value);
     }

packages/inputs/src/Slider.js

@@ -102,14 +102,23 @@ export class Slider extends MosaicClient {
       if (this.selection) this.publish(+value);
     });
 
-    // track param updates
-    if (this.selection && !isSelection(this.selection)) {
-      this.selection.addEventListener('value', value => {
-        if (value !== +this.slider.value) {
-          this.slider.value = value;
-          this.curval.innerText = value;
-        }
-      });
+
+    if (this.selection) {
+      if (!isSelection(this.selection)) {
+        // track param updates
+        this.selection.addEventListener('value', value => {
+          if (value !== +this.slider.value) {
+            this.slider.value = value;
+            this.curval.innerText = value;
+          }
+        });
+      } else {
+        // trigger selection activation
+        this.slider.addEventListener('pointerenter', evt => {
+          if (!evt.buttons) this.activate();
+        });
+        this.slider.addEventListener('focus', () => this.activate());
+      }
     }
   }
 
@@ -139,21 +148,31 @@ export class Slider extends MosaicClient {
     return this;
   }
 
+  clause(value) {
+    const { field, selectionType } = this;
+    if (selectionType === 'interval') {
+      /** @type {[number, number]} */
+      const domain = [this.min ?? 0, value];
+      return clauseInterval(field, domain, {
+        source: this,
+        bin: 'ceil',
+        scale: { type: 'identity', domain },
+        pixelSize: this.step
+      });
+    } else {
+      return clausePoint(field, value, { source: this });
+    }
+  }
+
+  activate() {
+    // @ts-ignore - activate is only called for a Selection
+    this.selection.activate(this.clause(0));
+  }
+
   publish(value) {
-    const { field, selectionType, selection } = this;
+    const { selection } = this;
     if (isSelection(selection)) {
-      if (selectionType === 'interval') {
-        /** @type {[number, number]} */
-        const domain = [this.min ?? 0, value];
-        selection.update(clauseInterval(field, domain, {
-          source: this,
-          bin: 'ceil',
-          scale: { type: 'identity', domain },
-          pixelSize: this.step
-        }));
-      } else {
-        selection.update(clausePoint(field, value, { source: this }));
-      }
+      selection.update(this.clause(value));
     } else if (isParam(this.selection)) {
       selection.update(value);
     }