AMP-html how to prevent lightbox close when user click on an input

Question

I have a amp-lightbox and a form in it.

 <amp-lightbox id="search-word"
                  layout="nodisplay">
        <div class="lightbox"
             on="tap:search-word.close"
             role="button"
             tabindex="0">
            
            <form id="search-word" role="search" action="https://localanagrammer.com/" target="_top">
                <div class="input-group">
                    <input type="text" id="searchWord" class="form-control" placeholder="enter scrabble word" data-ng-model="keyword" autocomplete="off" autofocus>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" data-ng-click="doSearch(keyword)">
                            <span class="fa fa-search" aria-hidden="true"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </amp-lightbox>

The lightbox is being closed when I try to click on text input.

The question is: What is the correct way to prevent closing?

Answer 1

I have solved it by placing a tap with an open action in the inner element. A similar situation here is (this is a React code that renders the AMP html):

        <amp-lightbox
            id="mylightbox"
            on="tap:mylightbox.close"
            class="dark-lightbox-background"
            layout="nodisplay">
            <div 
                class="container"
                on="tap:mylightbox.open">

                 <!-- content placed here -->

            </div>
        </amp-lightbox>