Dropdown search support for non-ascii characters

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.12.6] - 2017-09-11
+### :bug: Fixed
+-  Non-ascii characters, like chinese characters, are now supported as
+   search strings in the `dcc.Dropdown` component (https://github.com/plotly/dash-core-components/pull/75)
+
+
 ## [0.12.5] - 2017-09-11
 ### :bug: Fixed
 -  The `Interval` component was constantly resetting its interval on every update. Initially reported in https://community.plot.ly/t/multiple-interval-object-in-a-single-page/5699/3

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.12.5'
+__version__ = '0.12.6'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/Dropdown.react.js

@@ -3,6 +3,18 @@ import React, {Component, PropTypes} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
 
+// Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
+const REGEX = /\s+/; // Split on spaces
+const TOKENIZER = {
+  tokenize(text) {
+    return text
+      .split(REGEX)
+      .filter(
+        (text) => text // Filter empty tokens
+      );
+  }
+}
+
 const DELIMETER = ',';
 
 /**
@@ -20,15 +32,21 @@ export default class Dropdown extends Component {
         super(props);
         this.state = {
             value: props.value,
-            filterOptions: createFilterOptions({options: props.options})
+            filterOptions: createFilterOptions({
+                options: props.options,
+                tokenizer: TOKENIZER
+            })
         };
     }
 
     componentWillReceiveProps(newProps) {
         this.setState({value: newProps.value});
         if (newProps.options !== this.props.options) {
             this.setState({
-                filterOptions: createFilterOptions({options: newProps.options})
+                filterOptions: createFilterOptions({
+                    options: newProps.options,
+                    tokenizer: TOKENIZER
+                })
             });
         }
     }

test/test_integration.py

@@ -42,6 +42,11 @@ def wait_for_element_by_css_selector(css_selector):
             return self.driver.find_element_by_css_selector(css_selector)
         self.wait_for_element_by_css_selector = wait_for_element_by_css_selector
 
+    def snapshot(self, name):
+        if 'PERCY_PROJECT' in os.environ and 'PERCY_TOKEN' in os.environ:
+            python_version = sys.version.split(' ')[0]
+            print('Percy Snapshot {}'.format(python_version))
+            self.percy_runner.snapshot(name=name)
 
     def test_integration(self):
         app = dash.Dash(__name__)
@@ -53,17 +58,20 @@ def test_integration(self):
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
                     {'label': u'Montréal', 'value': 'MTL'},
-                    {'label': 'San Francisco', 'value': 'SF'}
+                    {'label': 'San Francisco', 'value': 'SF'},
+                    {'label': u'北京', 'value': u'北京'}
                 ],
-                value='MTL'
+                value='MTL',
+                id='dropdown'
             ),
 
             html.Label('Multi-Select Dropdown'),
             dcc.Dropdown(
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
                     {'label': u'Montréal', 'value': 'MTL'},
-                    {'label': 'San Francisco', 'value': 'SF'}
+                    {'label': 'San Francisco', 'value': 'SF'},
+                    {'label': u'北京', 'value': u'北京'}
                 ],
                 value=['MTL', 'SF'],
                 multi=True
@@ -74,7 +82,8 @@ def test_integration(self):
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
                     {'label': u'Montréal', 'value': 'MTL'},
-                    {'label': 'San Francisco', 'value': 'SF'}
+                    {'label': 'San Francisco', 'value': 'SF'},
+                    {'label': u'北京', 'value': u'北京'}
                 ],
                 value='MTL'
             ),
@@ -84,7 +93,8 @@ def test_integration(self):
                 options=[
                     {'label': 'New York City', 'value': 'NYC'},
                     {'label': u'Montréal', 'value': 'MTL'},
-                    {'label': 'San Francisco', 'value': 'SF'}
+                    {'label': 'San Francisco', 'value': 'SF'},
+                    {'label': u'北京', 'value': u'北京'}
                 ],
                 values=['MTL', 'SF']
             ),
@@ -107,7 +117,10 @@ def test_integration(self):
                     'data': [{
                         'x': [1, 2, 3],
                         'y': [4, 1, 4]
-                    }]
+                    }],
+                    'layout': {
+                        'title': u'北京'
+                    }
                 }
             ),
 
@@ -126,7 +139,7 @@ def test_integration(self):
 
             html.Label('TextArea'),
             dcc.Textarea(
-                placeholder='Enter a value...',
+                placeholder='Enter a value... 北京',
                 style={'width': '100%'}
             ),
 
@@ -140,6 +153,8 @@ def test_integration(self):
                 It includes a syntax for things like **bold text** and *italics*,
                 [links](http://commonmark.org/help), inline `code` snippets, lists,
                 quotes, and more.
+
+                北京
             '''.replace('    ', ''))
         ])
         self.startServer(app)
@@ -151,7 +166,9 @@ def test_integration(self):
                 '_dash-app-content').get_attribute('innerHTML'))
             raise e
 
-        if 'PERCY_PROJECT' in os.environ and 'PERCY_TOKEN' in os.environ:
-            python_version = sys.version.split(' ')[0]
-            print('Percy Snapshot {}'.format(python_version))
-            self.percy_runner.snapshot()
+        self.snapshot('gallery')
+
+        self.driver.find_element_by_css_selector(
+            '#dropdown .Select-input input'
+        ).send_keys(u'北')
+        self.snapshot('gallery - chinese character')