spacejack / mithril-select

Custom Select Component for Mithril.js

Mithril Custom Select Component

A custom select widget component for Mithril.js. Built to mimic native browser select behaviour (if not looks) as closely as possible, including acessibility and keyboard features. The minimal CSS included can be easily overridden and customized by your own styles.

Try a live demo here.

Install:

npm install mithril-select

(TypeScript types are included.)

You will need to include the css file for some basic working styles.

Using PostCSS with postcss-import allows you to import the stylesheet from node_modules:

@import "mithril-select";

If you're using a sass compiler, you can add:

@import "node_modules/mithril-select/index";

to one of your sass files.

Otherwise you can copy the node_modules/mithril-select/index.css file to your project and add it to your html page.

See the example in the git repository for examples of style customization.

Example use:

import mithrilSelect from "mithril-select"
// var mithrilSelect = require("mithril-select").default

// Data to be used in select
const colours = [
  {id: 'red', text: 'Red'},
  {id: 'blue', text: 'Blue'},
  {id: 'green', text: 'Green'},
  {id: 'yellow', text: 'Yellow'},
  {id: 'orange', text: 'Orange'},
  {id: 'pink', text: 'Pink'}
]

let colour = ""

const component = {
  view() {
    return m(mithrilSelect, {
      options: [
        {value: null, view: 'Select a colour...'}
      ].concat(
        colours.map(c => ({value: c.id, view: c.text}))
      ),
      // A CSS class to add to the root element of the select
      class: 'my-select',
      // Respond to selection changes
      onchange: (val) => {
        colour = val != null
          ? colours.find(c => c.id === val).text
          : ""
      }
    })
  }
}

All options and component Attrs:

(See src/index.ts)

/** Represents a single option in a select */
interface Option {
  /**
   * Unique value that identifies this option.
   * Can be any type except `undefined`.
   */
  value: any
  /**
   * Either a string to display for the option or a callback
   * that renders vnodes.
   */
  view?: string | (() => m.Children)
}

/** Attrs object for Select component */
interface Attrs {
  /**
   * Array of `Option` objects
   */
  options: Option[]
  /**
   * Optional prompt to display until the user selects an option.
   * Supply either a string to display or a callback that renders vnodes.
   */
  promptView?: string | (() => m.Children)
  /**
   * Optional value to use for element id attribute.
   */
  id?: string
  /**
   * Optional name of hidden input for form. If none supplied, no hidden
   * input will be rendered. Hidden input value will be coerced to string.
   */
  name?: string
  /**
   * Current selected option value. Omitting or setting to `undefined`
   * is the same as supplying no value. (`null` can be a value.)
   */
  value?: any
	/**
   * Optional aria-labelledby attribute
   */
	ariaLabelledby?: string
  /**
   * Value of option that will be selected on creation. Overridden
   * by `value` if supplied, otherwise will be first option.
   */
  initialValue?: any
  /**
   * Additional class string to use on containing element.
   */
  class?: string
  /**
   * Callback that will be passed the value of the selected option
   * when selection changes.
   */
  onchange?(value: any): void
}

Development Install:

First git clone this repo. Then:

npm install

Build module

npm run build

Serve, compile & watch example app:

npm start

Then go to http://localhost:3000/ in your browser.

Build a plain ES2015 version of the library:

npm run build-es2015

Will output src/index.js

---

Thanks to barneycarroll for providing an initial POC demo using global focus/blur listeners.

mithril-select's Issues

Scroll jank on popup

On the demo page , if you click "Mandarin" and then press the keyboard down arrow multiple times the popup's vertical scroll bar position will shift up or down.