diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index 092ed9cca0..17febe02c7 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -30,6 +30,7 @@ var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); import Modal from 'matrix-react-sdk/lib/Modal'; +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; // turn this on for drop & drag console debugging galore var debug = false; @@ -151,10 +152,11 @@ var RoomSubList = React.createClass({ } }, - onRoomTileClick(roomId) { + onRoomTileClick(roomId, ev) { dis.dispatch({ action: 'view_room', room_id: roomId, + clear_search: (ev && (ev.keyCode == KeyCode.ENTER || ev.keyCode == KeyCode.SPACE)), }); }, diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 6e47f7a57b..e35d1e4899 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -16,12 +16,13 @@ limitations under the License. 'use strict'; -var React = require('react'); +import React from 'react'; import { _t } from 'matrix-react-sdk/lib/languageHandler'; -var sdk = require('matrix-react-sdk') -var dis = require('matrix-react-sdk/lib/dispatcher'); -var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); -var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); +import KeyCode from 'matrix-react-sdk/lib/KeyCode'; +import sdk from 'matrix-react-sdk'; +import dis from 'matrix-react-sdk/lib/dispatcher'; +import RateLimitedFunc from 'matrix-react-sdk/lib/ratelimitedfunc'; +import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton'; module.exports = React.createClass({ displayName: 'SearchBox', @@ -39,26 +40,25 @@ module.exports = React.createClass({ componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); + document.addEventListener('keydown', this._onKeyDown); }, componentWillUnmount: function() { dis.unregister(this.dispatcherRef); + document.removeEventListener('keydown', this._onKeyDown); }, onAction: function(payload) { switch (payload.action) { -/* Disabling this as I find it really really annoying, and was used to the - previous behaviour - see https://github.com/vector-im/riot-web/issues/3348 - // Clear up the text field when a room is selected. case 'view_room': - if (this.refs.search) { + if (this.refs.search && payload.clear_search) { this._clearSearch(); } break; -*/ case 'focus_room_filter': if (this.refs.search) { this.refs.search.focus(); + this.refs.search.select(); } break; } @@ -70,7 +70,7 @@ module.exports = React.createClass({ this.onSearch(); }, - onSearch: new rate_limited_func( + onSearch: new RateLimitedFunc( function() { this.props.onSearch(this.refs.search.value); }, @@ -90,6 +90,17 @@ module.exports = React.createClass({ } }, + _onKeyDown: function(ev) { + // Only do anything when the key event target is the search input + if(ev.target !== this.refs.search) return; + switch (ev.keyCode) { + case KeyCode.ESCAPE: + this._clearSearch(); + dis.dispatch({action: 'focus_composer'}); + break; + } + }, + _clearSearch: function() { this.refs.search.value = ""; this.onChange();