Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Uncaught TypeError: ele.hasAttribute is not a function" in FAB-list button on Android #9942

Closed
hugomosh opened this issue Jan 10, 2017 · 15 comments
Assignees

Comments

@hugomosh
Copy link

hugomosh commented Jan 10, 2017

Ionic version: (check one with "x")
[ ] 1.x
[ X] 2.1.14

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When i click in a FAB list button i get "Uncaught TypeError: ele.hasAttribute is not a function" in the adb console.
In ionic serve works fine but not in native android

Expected behavior:
I just want a simple click

Related code:

<ion-content>
    <ion-fab top right edge #fab>
        <button ion-fab mini (click)="searchInVisibleArea(null)">
            <ion-icon name="add"></ion-icon>
        </button>
        <ion-fab-list side="bottom">
            <button ion-fab (click)="searchInVisibleArea(fab)">
                <ion-icon name="search"></ion-icon>
            </button>
        </ion-fab-list>
    </ion-fab>
    <div id="native-map">
    </div>
</ion-content>

I think it has to do with something of the element selection. Maybe a case sensitive thing in the JS running in android

@brandyscarney
Copy link
Member

Could you run ionic info from inside of your project folder and paste the output please? Thanks!

@brandyscarney brandyscarney added the needs: reply the issue needs a response from the user label Jan 10, 2017
@hugomosh
Copy link
Author

Your system information:

Cordova CLI: 6.2.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.14
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.12 
OS: OS X El Capitan
Node Version: v5.10.1
Xcode version: Xcode 8.2 Build version 8C38

@brandyscarney brandyscarney added needs:devicetesting and removed needs: reply the issue needs a response from the user labels Jan 10, 2017
@jgw96
Copy link
Contributor

jgw96 commented Jan 10, 2017

Hey @hugomosh , what version of Android are you having this issue with?

@hugomosh
Copy link
Author

hugomosh commented Jan 10, 2017 via email

@jgw96
Copy link
Contributor

jgw96 commented Jan 10, 2017

Hey @hugomosh unfortunately i cannot seem to reproduce your issue with the latest nightly on either a Nexus 7 running Android 6.0.1 or a Nexus 6 running Android 7.1.1. Also used your exact markup you posted above in my tests. Do you have a repo that i can use to reproduce this issue?

@hugomosh
Copy link
Author

Oh, I've just realize that is the (native) map absorbing the clicks. The FAB lead button inside the map div works fine but the expanded list of FABs are like in an hidden or lower layer*.

Do you know any related problem?

I see the buttons but I am not able to click them.

And the error "Uncaught TypeError: ele.hasAttribute is not a function"seems like a common response when the map is clicked : / that is why i confused them.

@brandyscarney
Copy link
Member

It seems like this may be a duplicate of #9726

@jgw96
Copy link
Contributor

jgw96 commented Jan 10, 2017

Hey @hugomosh , thanks for posting that info. Since this seems to be the same issue that was already reported in #9726 I am going to close this issue for now. You can track the progress on this over on that issue. Thanks for using Ionic!

@jgw96 jgw96 closed this as completed Jan 10, 2017
@hugomosh
Copy link
Author

Not sure if related. What I am not able to do is click in the Fab buttons:
the blue works fine but the gray ones are like in another layer . I am not sure if is the flex or diplay. I was not able to figure it out with the safari debugger.

captura de pantalla 2017-01-10 a las 4 08 37 p m

@hugomosh
Copy link
Author

Yes. 901#issuecomment solved the error but I am still unable to click the gray FAB buttons : (

@brandyscarney brandyscarney reopened this Jan 10, 2017
@jgw96
Copy link
Contributor

jgw96 commented Jan 11, 2017

Hello @hugomosh , so this is only happening with a google map correct? When you are using fab buttons without the google map it works correctly?

@manucorporat manucorporat self-assigned this Jan 17, 2017
@heddanas
Copy link

heddanas commented Feb 19, 2017

Hello everyone,

It's my first contribution to the Ionic Community (also to the Github Comm.)

I am getting this error to.
Like you have said @jgw96, the error is related when using FAB buttons with Native Google Map. But when using Google Map Javascript Library, there is no error.

@hugomosh You can read this article from Josh Morony, he faced the same problem (I think), and the solution that he proposed is to wrap the FAB button inside the map div element :
https://www.joshmorony.com/google-maps-in-ionic-2-native-or-web/

Error_FAB_Google_Map


Anas HEDDOUN
Web Developer, UI/UX Designer & SEO Consultant

@heddanas
Copy link

Read this from :
https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#mapsetclickable

If you want to show your HTML above the map, such as a sidebar, you need to use map.setClickable( false ) before showing it. (otherwise the click will be passed to the map). You don't need to use this, when your content is inside of the map_canvas div, only when outside of it)

Because the plugin watches ONLY elements inside of the map_canvas div, not others. That's why you need to call map.setClickable( false ) to be clickable (eg. sidebar), then call map.setClickable( true ) after closing.

@wf9a5m75
Copy link

@hugomosh @heddanas

I think the latest version (v2) solves this issue without map.setClickable().

@ionitron-bot
Copy link

ionitron-bot bot commented Jul 22, 2018

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

@ionitron-bot ionitron-bot bot closed this as completed Jul 22, 2018
@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jul 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants