あげ(∩・ω・)∩

この書き込みを見落としていました ? 
草村さん、ありがとうございます。

ただ、前回の修正点は、現在でも適用されていて、最近特に変更もしていないようなんですけど、現在は当サイトの検索ボタンからでもフォーカスされないのでしょうか

こんばんは。

こちらの件は、検索ボタンを押して拡大される問題ではなく、検索ボタンを押した後、フォーカスが入らない状態に戻っている、という話のようですね。（フォームをタップすれば、キーボードが出てくる状態）

safariのデベロッパーツールで見ましたが、javascriptのコンソールエラーなどは見つからず、ちょっと原因が分かりませんでした・・・。

あ、そっちか ? ?
でも特に最近コードは変更してないようですけどなぜなんだろう…。
変更したとき。
https://github.com/yhira/cocoon/commit/7f2d7e9a2c3f7770a6f61f3f2bf69a814d06645e#diff-dee1eb0a17b89ee10e8277a3fdd706da
現在。
https://github.com/yhira/cocoon/blob/b5ac8eaf61ad2dd327865d82640976970b73d4ac/javascript.js#L58

iOS以外でも、そうなっていますね。

調べたところ、モーダルウィンドウが出る前に処理されてるみたいです。

https://stackoverflow.com/questions/15859113/focus-not-working

setTimeout()で処理を遅らせてあげると、フォーカスが来ました。

なるほど！
以前のトピックを見る限りでは、そのタイミングで問題なかったようですが、ブラウザのアップデートか何かでタイミングが変わってしまったんですかね。
setTimeoutでフォーカスのタイミングを変更してみました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/0b98e750defca278fca5453f1b41cc48fc371b12
当サイトにも適用してあるので、このサイトのモバイルボタンでも試せます。

たなかまさん、ありがとうございます！

ありがとうございます。

iOSで検索ボタンをタップ→フォームにフォーカス＆キーボードが起動したのを確認いたしました。

実機を持たれている方もご確認いただけると幸いです。

こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。

https://stackoverflow.com/questions/15859113/focus-not-working

iPhoneにて試してみました。

以下フォーカス・キーボードの動作に関する備考はスマホの状況です。
実機がないと分かりづらいかと思いますが参考になれば幸いです。

Cocoon 2.0.0.3～12月2日の報告までの間の更新に何か原因がありそう？

【2.0.0.3】
スマホ：フォーカス○、キーボード○
PC：フォーカス○

2.0.0.3のテスト環境があったので試しました。こちらはキーボードが起動しました。

【2.0.2.4】
スマホ：フォーカス×、キーボード×
PC：フォーカス×

2.0.2.4ではフォーカスされませんが、背景の黒い部分をタップすると検索画面が消えると同時にフォーカス・キーボードが起動します。(検索画面は透明のままです)

【Cocoonトップページ】
スマホ：フォーカス○、キーボード×
PC：フォーカス○

タッチ後フォームにフォーカスされるもののキーボードは起動しませんでした。※添付画像
（フォームにカーソルが入っていないようです）
背景の黒い部分をタップしてもキーボードは起動しません。

【確認環境】
スマホ：iPhone 8 iOS13.2.3
PC：Win10 Chrome

実機がなくても分かるみたいです。Androidでも同じですが、Windows（10）でも検索のカーソルが出るバージョンと出ないバージョンがあるようです。

以下｜部分が、点滅的な。

｜サイト内検索

テーマ名：Cocoon
バージョン：1.9.9.5.3　です。

添付画像あり。

• 古いバージョンのサイトもあったので一応。テーマ名：Cocoon

バージョン：1.7.8.3　これは　｜サイト内検索　　検索にカーソルは出なかったです。

関係ないけど、草村さんのこれ↓　かわいい ? 

あげ(∩・ω・)∩

こちらのコメント欄を読むと、setTimeout()に頼らない方が良いとのことですが、setTimeout()を使わず直す方法が分からない・・・。

あまりスマートな方法ではないとは思いつつも、僕も他の方法が分からないです… ? 

Cocoon 2.0.0.3～12月2日の報告までの間の更新に何か原因がありそう？

今、2.0.0.3から遡って見ているのですが、JavaScript関係で変更したといえば、まずこれが出てきました。
https://github.com/yhira/cocoon/commit/b5ac8eaf61ad2dd327865d82640976970b73d4ac#diff-dee1eb0a17b89ee10e8277a3fdd706da
この部分を削除すると動作しますでしょうか。
https://github.com/yhira/cocoon/blob/0b98e750defca278fca5453f1b41cc48fc371b12/javascript.js#L178

僕の環境で削除して試したけど、Firefoxですらダメだったわ…。

画像の部分を削除してみましたが、iPhoneでもダメでした?

あと、「2.0.0.3のjavascript.js」を丸々コピペして書き換えてもダメでした。

※前回書き忘れましたがiPhoneのブラウザはSafariです。

バージョン：1.7.8.3　これは　｜サイト内検索　　検索にカーソルは出なかったです。

バージョン：1.9.9.5.3

バージョン：1.7.8.3

このCocoon: javascript.jsを見てですが

  //検索ボタンクリックでフォーカスを入力エリアに移す
  $('.search-menu-button').click(function(){
    //フォーカスの移動
    $('#search-menu-content .search-edit').first().focus();;
  });

このコードをバージョン：1.7.8.3に追記すればChromePCで確認時にも
カーソルが出なかったのに出てきました。結構バージョンがふるいんですが＾＾；

メモ。
バージョンを上げていって試してみた限りでは、Firefox環境では2.0.0.5～2.0.0.6の間で何かあった模様。2.0.0.6～動作しなくなる。
とりあえず、後からまた原因を探ります。

2.0.0.5～2.0.0.6での変更は以下の2つしかない。
https://github.com/yhira/cocoon/commit/330d57089eb433578e54d67dafcca3365c783269
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c

なので原因は、こちらと思われる。
https://github.com/yhira/cocoon/commit/4dca933eaafc0b76e35aea83c96755c609a4449c#diff-da232d78aa810382f2dcdceae308ff8e

これの対応が原因ぽい。
https://wp-cocoon.com/community/skin-bugs/season%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%E3%81%A7%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%83%BB%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3/

おそらく、デフォルトでvisibility: hidden;になっているから、フォーカスが移動しないと思われる。
style.cssの記述を削除すれば、何とかなると思うけど、それだと上記トピックの問題が元に戻ってしまうので、とりあえず対策は後で考えます。

今、思いついた。透過で対応しようと思います。

時間がかからなそうだったので、修正しておきました。
https://github.com/yhira/cocoon

これで多分、カーソルが出ると思います。おそらく。
https://github.com/yhira/cocoon/commit/99d5ee6c53170378ff285f57db25b6944fba1eb7#diff-da232d78aa810382f2dcdceae308ff8e

.search-menu-content {
	visibility: visible;
}

こんな感じだとダメですかね？？？

追記

今githubアップロードが完了して、スマホAndroidとChromePC上で問題ないことを確認できました！

iPhone・iPadでも問題なけば大丈夫そうですね❦

お疲れさまでした ? 

僕の方でもiOSシミュレーターで上手く表示できました。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

javascriptかと思っていたのですが、CSSとは分かりませんでした。

setTimeout()やdelay()は、その場しのぎで使っちゃいますね・・・。

ご確認ありがとうございます。

キーボードが出てくる・出ないは、こちらの環境の設定かもしれないのですが、フォーカスは来ています。

ということは、キーボードは出なかったということでしょうか。
まだ2.0.0.3からの違いといえば、SNSボタンの初期位置が違うので、こちらも元に戻しておきました。
https://github.com/yhira/cocoon/commit/0cba06e387b26e8978d1f795136d09338af961fe#diff-da232d78aa810382f2dcdceae308ff8e

javascriptかと思っていたのですが、CSSとは分かりませんでした。

僕も、草村さんのヒントがなかったら、多分わからなかったです。

ということは、キーボードは出なかったということでしょうか。

おそらく、シミュレーターの初期設定がMacの物理キーボードを使う、になっているからだと思います。

ソフトウェアキーボードを使う設定にすると、キーボードが出てくるので問題はなさそうです。

ただ、もしかしたらそれもシミュレーターの設定に依存してる可能性も・・・という感じですね。

https://github.com/yhira/cocoon

こちらでgithub先行バージョンをiPhone/ipadを持っている人にFTPでアップロードしてもらった結果待ち。ってことで、だれか見てくれた人の返信を待ってみるのが良いカモしれないですね。

お疲れさまです。

iPhoneで確認した所、フォーカスされキーボードも起動しました！
（ダウンロードしてアップロードしたCocoonのバージョンは2.0.3です）

原因が解明してよかったです。

ついでに要望なんですが検索フォームをクリックで表示して、検索をせず背景の黒い部分をクリックして閉じてもキーボードが表示されたままになってしまうので

よければ閉じるタイミングでフォーカスが外れるようにしてほしいです。

コード的には例えば以下のような感じです。
最適化出来ているかはちょっと自信ないですが…。
※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

  $('.search-menu-button').click(function(e){
    if( e.target.tagName == 'INPUT' ) {
      var searchEdit = $('#search-menu-content .search-edit').first();
      if( e.target.checked ) {
        searchEdit.focus();
      } else {
        searchEdit.blur();
      }
    }
  });

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434

草村さん、コードありがとうございます！

コードを適用したものを、以下にアップしておきました。
https://github.com/yhira/cocoon
変更。
https://github.com/yhira/cocoon/commit/14c406fe6dabf5c42fd0527f6866443ae05eb5c7
僕の環境（※Firefox ? ）で動作確認した限りでは、問題なかったです。

投稿者:: 草村

※1回のクリックでlabelとinputの2回分イベントが発生するためタグ名で判別しています。

こういう時はchangeがいいみたいですね。

$('#search-menu-input').change(function(e){

https://qiita.com/kazu56/items/9ebc8918fb7a75da9434

この書き込みを見逃していました ? 
こっちも適用しておきました。
https://github.com/yhira/cocoon/commit/76a48ca29b8a3b28c513fe582e1db32e06741147

わいひらさん

ありがとうございます！iPhoneでも確認して問題なかったです。

あと、changeに変えた事でタグ名の判別が不要になったので

if( e.target.tagName == 'INPUT' ) {

の判定を無くして以下で大丈夫でした！

  $('#search-menu-input').change(function(e){
    var searchEdit = $('#search-menu-content .search-edit').first();
    if( e.target.checked ) {
      searchEdit.focus();
    } else {
      searchEdit.blur();
    }
  });

ご確認ありがとうございます。

僕も思ったのですが、タグ名が明示的なっていいかなと思ってそのままにしておりました。
ただ、削除した方がコードが短くなって読みやすくなるという利点もあるので、削除しておこうと思います。

わいひらさん

なるほどです。
iPhoneでは記述があってもなくても動作するのは確認済みですので、ご都合に合わせていただければと思います。

お疲れさまでした！

いえいえ、僕もどっちがいいか半々ぐらいで迷ったので、コードを書いていただいた、草村さんが書き込んでいただけたおかげで、迷う必要が無くなりました ?