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?

Pedro Israel · Accepted Answer · 2017-08-31 00:23:15Z

4

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>

answered Aug 31, 2017 at 0:23

Pedro Israel

1195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adjuremods · Accepted Answer · 2016-09-30 13:29:00Z

2

Based from this documentation, setting the on attribute on one or more elements within the lightbox and setting it's method to close will close the lightbox when the element is tapped or clicked.

I think this code on="tap:search-word.close" is the reason why the lightbox is closed when you clicked on text input.

answered Sep 30, 2016 at 13:29

adjuremods

3,0382 gold badges16 silver badges17 bronze badges

1 Comment

Vazgen Manukyan Over a year ago

I know the reason. But I want to find a solution, I guess it should be possible to prevent it.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related