react クリックでselectを開く

Question

<button onClick={this.click.bind(this)}>btn</button>
<select className={theme.timePulldownList__select} ref="timePulldownList">
<option>9:00</option>
<option>9:15</option>
</select>

click = () => {
this.refs.timePulldownList.onfocus();
}

上記では動きませんが、
buttonをクリックすると、selectメニューが開く挙動を
reactにて実装したいのですが可能でしょうか？

ご教授お願いいたします。

Answer 1

こんにちは。

実際にサンプルを作ってみたわけではないですが、以下の(1)(2)を参考にすると、
とりあえず、それらしく動きそうなものを作れるのでは？と思った参考ページを
回答します。

(1) ボタンをクリックしたときに select を開くサンプル

• Open select programmatically

　http://fiddlesalad.com/javascript/open-select-programmatically/

上記は　JQuery を使っていますが、同じことをReactでやればいいという目処がつきます。

※ちなみに私の使用しているブラウザ（Mac版Chrome 67)では、開くのと閉じるのがうまく動いたのは
「Generic」ボタンのみでした。

(2) Reactである要素にfocusするサンプル

上記 (1)の「Generic」ボタンのクリックでやっている

$("#c").on("click", function(evt) {
	if ($("#s").attr("size") == 6) {
		$("#s").attr("size", 1);
	} else {
		$("#s").attr("size", 6);
		$("#s").focus();
	}

をReactでやってみるとすれば、上記は、select のsize属性に1だったり、6だったりの値を
設定することで開閉しており、これについては Reactではselect がrenderされるときに
size属性を適切に与えればよいとして、もう一点、focus() でフォーカスを当てるほうは、
以下が参考になります。

• React set focus on input after render

https://stackoverflow.com/questions/28889826/

冒頭書いたように、試しに作ってみたわけではないので、「これで出来ました」とは
言えないのですが、参考になれば幸いです。

Comments

[cheche0830]

いえいえ、ありがとうございます！
取っ掛かりだけほしかったので大変助かりました！やってみます！

[jun68ykt]

こんにちは。

>大変助かりました！

とのことでよかったです。

以下補足です。

http://fiddlesalad.com/javascript/open-select-programmatically/ の
Generic ボタンの方法でも、実際に <select > の右端に表示される、∧ または ∨ を
クリックしたときに開く状態と同じ状態になるわけではなくちょっとカッコ悪いですね。

Is there a way to select an open select box in css?
https://stackoverflow.com/questions/32693560/

の回答にも

It's not possible to detect if a HTML select element is opened using CSS, or even javascript.

というのがあるので、標準の select で、プログラムから選択肢が表示される
状態にするのは難しいかもしれません。

代替案として、 material UI の Select
https://material-ui.com/demos/selects/
だと、
https://material-ui.com/api/select/
の中に open という　props がありますが、これに true を指定して

<Select open={true} value= ... >

とすると、選択肢が表示された状態でrenderされます。

https://codesandbox.io/s/k63wjqk93

のソース demo.js の中のどれかの <Select> に open={true} を追加すると確認できます。
ただし、open={true} を追加するだけでは、開閉時にエラーになりますので、
これに対応したのが以下の一番左上の Select です。

https://codesandbox.io/s/9z626o021w

上記の手を加えたもののように、 state に持ったフラグで
<Select >の開閉状態を制御できるので、
何らかのボタンをクリックしたときに、このフラグを true にすれば
よいかと思います。

以上参考まで

[cheche0830]

ありがとうございました！