Androidでポップアップが表示されている時に、ポップアップの外側をタップすると、後ろにあるボタンが反応してしまう場合の対処法

#目次
1. はじめに
2. バグ再現
    3. 画面解説
    4. コード
    5. Action紐づけ
3. 解消方法
4. まとめ
5. 参考

#はじめに

Android端末では、ポップアップが表示されている時に、ポップアップの外側をタップすると、
後ろにあるボタンが反応してしまう場合があります。
（例：ボタンの上にzindexが大きいFlexContainerをおいても、下のボタンをタップすると動作してしまう）

今回は、コンポーネントのポップアップを使って、
後ろのボタンが反応しないようにするための対処法についてご紹介したいと思います。

#バグ再現
######1. 画面解説
まず事象を再現するために、`btnInsert`と`btnDelete`の2つのボタンを配置し、
それぞれのボタンをタップすると、ポップアップが表示されるようなサンプルフォームを作成します。

方法のみ先に知りたい方は、[3. 解消方法](#解消方法)　をご確認ください:runner_tone4::dash:


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3d03f94f-a40b-54bc-e81c-f16cad5ba17e.png" width=70%>

それぞれのボタンをタップすると、`AlertPopup`が表示されるよう、Componentを作成します。
ComponentはTemplatesタブのComponentsから作成できます。
作成方法は[こちらの記事]
(https://qiita.com/Kony_Team/items/a25b322d9524f9f1ac92#1-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90)を参考にしてください！
![スクリーンショット 2020-12-25 17.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c2198cf1-7574-2e2e-84e8-a7364df24bf7.png)

タップしたボタンでポップアップのメッセージを変えるためにlblTitleを選択し、propertyの共有をします。Manage Propertiesの作成方法は[こちらの記事](https://qiita.com/Kony_Team/items/a25b322d9524f9f1ac92#3-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E5%85%B1%E6%9C%89)を参考にしてください！
![スクリーンショット 2020-12-25 17.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/6739d8f7-7caf-b67c-4b91-17dc9c8ca991.png)
それぞれのボタンをタップするとこのような画面になります！
(左)Insertボタンタップ　(右)Deleteボタンタップ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7f20cae1-9aeb-76a8-bea7-5416cd6066ee.png" width=50%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3671d04b-cba9-0873-4684-1eec65419c03.png" width=50%>

######2. コード

```frmMainController.js
define({ 

  onPreShow: function() {
    this.view.AlertPopup.setVisibility(false);
  },

  showAddPopup: function() {
    // 共有したComponentのPropertyから表示させるテキストを指定
    this.view.AlertPopup.titleText = "Do you want to Insert the data?";
    this.view.AlertPopup.setVisibility(true);
  },

  showDeletePopup: function() {
    // 共有したComponentのPropertyから表示させるテキストを指定
    this.view.AlertPopup.titleText = "Do you want to Delete the Data?";
    this.view.AlertPopup.setVisibility(true);
  },

});
```
この時のfrmMainControllerのコードです。
`onPreShow`で画面表示時にポップアップを非表示にし、各ボタンを押下するとそれぞれのポップアップが表示される関数`showAddPopup`と`showDeletePopup`を書きます。
`kony.ui.Alert`については[こちらの記事](https://qiita.com/Kony_Team/items/c992fd281801944ccc3f#4-%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%87%A6%E7%90%86)を参考にしてください。

ComponentsのAlertPopupControllerもコーディングします。

```AlertPopupController.js
define(function() {
  return {
    closePopup: function() {
      // AlertPopupを非表示にする
      this.view.setVisibility(false);
    },
  };
});
```
ポップアップのOKボタンを押した時にAlertPopupを非表示にする関数を書きます。

######3. Action紐づけ
関数をそれぞれ用意したのでAcrtionの紐づけを行います。
frmMainのbtnInsertを選択し、onClickのEditをクリックします。
Actionの中から`Invoke Funciton`を選択し、紐づけたい関数(showAddPopup)を選択します。
同様の手順で
btnDeleteとshowDeletePopup、
AlertPopupのbtnOKとclosePopupを紐づけます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8a91dbc2-48c1-f0d3-c76d-ea4d84d6a068.png" width=45%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ef8ebe87-3d8d-d476-7c37-b90980b27121.png" width=55%>
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f62343238353962652d656436342d333565612d633461322d3463633564356162333065322e706e67のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/d1f75a4f-efa1-9395-a262-e975d365933c.png)

frmMainControllerのonPreShowはfrmMainを選択し、Actionから`PreShow`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3afee5e2-2c07-8211-ddb9-a359b1cd6896.png" width=70%>


では実際に見てみましょう
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/JhEBSPaym0">pic.twitter.com/JhEBSPaym0</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1342391198510501889?ref_src=twsrc%5Etfw">December 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Insertボタンをタップすると、AlertPopupが表示され、
その状態でポップアップの外側にあるDeleteボタンをタップすると、
ボタンが反応してしまい再びAlertPopupが表示されてしまいます。。:frowning2:

本来ならポップアップ表示中に、後ろのボタンは反応しないようにしたいので、
この問題の対処法について書いていきます。

#解消方法
ポップアップ表示中に外側にあるボタンが反応しないようにするためには、
対象となるポップアップを選択し、タップした時に反応するonClickにたった一つアクションを追加すれば解決します。

今回の場合、AlertPopupを作成しているので、
AlertPopupを選択しonClickのEditをクリックします。

Actionの中から`Add Snippet`を選択し、returnと記載してください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/ad5faea1-546d-15fb-5950-47ea3b0709c8.png" width=40%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5f375999-ce68-bd85-b0dc-e72891938fd9.png" width=60%>
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f66316234373663302d393433332d666232622d316135342d3364353665396362356362662e706e67のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c82b1100-8855-5b01-6b75-6423e74fd7e4.png)

`return`を追加することで、ポップアップの外側をタップしても反応しないようにすることができます。

ではどうなったか、確認してみましょう。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/kr73XYEx6i">pic.twitter.com/kr73XYEx6i</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1342393340638064641?ref_src=twsrc%5Etfw">December 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Deleteボタンをタップ後、AlertPopupを表示させたままInsertボタンをタップできなくなっていますね。

#まとめ
ポップアップを使用して同様の事象に遭遇した時は、今回の記事を参考にしていただければと思います！

#参考
AlertTypeについて：
https://qiita.com/Kony_Team/items/c992fd281801944ccc3f#4-%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E5%87%A6%E7%90%86