diff --git a/ui/js/component/file-selector.js b/ui/js/component/file-selector.js
index b0298424f..910920419 100644
--- a/ui/js/component/file-selector.js
+++ b/ui/js/component/file-selector.js
@@ -12,6 +12,11 @@ class FileSelector extends React.PureComponent {
type: "file",
};
+ constructor(props) {
+ super(props);
+ this._inputElem = null;
+ }
+
componentWillMount() {
this.setState({
path: this.props.initPath || null,
@@ -47,7 +52,7 @@ class FileSelector extends React.PureComponent {
{" "}
- {this.state.path ? this.state.path : __("No File Chosen")}
+ {
+ this._inputElem = input;
+ }}
+ onFocus={() => {
+ this._inputElem.select();
+ }}
+ readOnly="readonly"
+ value={this.state.path || __("No File Chosen")}
+ />
);
diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss
index 2cb9fd322..561af9a91 100644
--- a/ui/scss/component/_file-selector.scss
+++ b/ui/scss/component/_file-selector.scss
@@ -1,5 +1,11 @@
+.file-selector {
+ display: flex;
+}
+
.file-selector__choose-button {
- font-size: 13px;
+ font-family: inherit;
+ margin-right: 16px;
+ padding: 0 16px;
}
.file-selector__path {