I have a Material-UI <Dialog> element that has worked perfectly for a long time, including in Chrome using device emulation. Recently I noticed that for some reason, when using device emulation in Chrome, the dialog opens, and then immediately closes. The same thing is happening with my <Drawer> element. Looking at the call stack, I can see a topClick event is triggering dispatchEvent and is closing the elements -- even though I've clicked nothing except the UI element that opens the Dialog or Drawer.
When I am not using device emulation, everything runs as expected.
The same anomaly is seen when I access the web app from my iPhone. I have updated to the latest versions of all my React plugins, including react-tap-event-plugin, but the anomaly is still here.
What could be causing this?
Thanks very much in advance to all for any info!
Material-UI has dropped its dependency on react-tap-event-plugin. It now uses onClick instead of onTouchTap.
Related
I instantiate a modal dialog and have a button that executes Capture.captureAudio()
On Android 8+ running on Samsung TAB S5e and Galaxy Tab A8 devices,
Tapping the button opens the recording dialog as expected, however when tap "Save" we don't get the String that Capture.captureAudio() returns until I dispose the current dialog.
Then the Capture.captureAudio() results are returned to me.
Works correctly on IOS and PC.
My Dialog is executed on the EDT, the Capture.captureAudio() is executed from a lambda expression and on a separate EDT
Thoughts?
Regards
Try showing the Dialog as modless using the showModless() method. Alternatively try using an InteractionDialog as discussed here.
We generally recommend avoiding Dialog for any complex UI especially one that might use the invokeAndBlock semantics. Nesting those can lead to unexpected side effects as you can see in this case. This only happens on iOS since the iOS implementation uses invokeAndBlock() internally
I have implemented several expandable menus using MUI Accordion's. Their expansion is controlled through the "expanded" property. MUI release is 4.10.2.
In recent browsers each Accordion closes when I open one of the others. I have implemented this behavior through ClickAwayListener's that wrap the content of the AccordionDetails.
In IE11 this does not happen entirely. What I see is that the ClickAwayListener does not catch the mouse click on the sibling AccordionSummary's. Mouseclicks in all other parts of the page are caught correctly.
In all recent browsers the click on the sibling AccordionSummary is correctly used to open it, and then it arrives to the ClickAwayListener of the previously chosen menu (and closes it). In IE11 this does not happen.
I am not using preventDefault in any part of the page. No error message is reported to the IE11 console.
I have created a codesandbox that contains the minimal code that fails on my website:
https://codesandbox.io/s/cocky-galileo-gqxz9
Unfortunately this codesandbox page does not run in IE11, so the issue is not really reproducible.
I use variations of <CardActionArea onClick={someFunction}> throughout my React app, and I've come across an instance where clicking the card does not fire the onClick function. This is only when the component is rendered in a certain tree, in all other parts of the app it works as expected. I'm using in Algolia's react-instantsearch-dom component in my component that's giving the issue.
The ripple effect (the animation that shows the user clicked the card) fires in every situation. So it doesn't seem to be something as simple as a transparent div overlaying the card. Below is a working component tree compared to the one with the issue:
working
click does nothing
One odd thing you can see above is both CardActionArea components show an empty onClick. But the function still works in most cases.
I'm using onClick={() => console.log('click')} to test, so it doesn't appear to be an issue with the function itself. Any ideas on what could prevent the onClick even from firing, or suggestions for troubleshooting would be appreciated.
Edit: This issue doesn't happen in iOS Safari, but it does occur in Firefox.
Edit 2: Since I don't understand this well enough to reproduce it, and it doesn't appear to be something obvious in the code, I'm looking for troubleshooting advice. Is there something in Chrome's developer tools I can use to trace this behavior?
The issue was the anonymous component between Article and CommentEditor. The component was rendered into a Dialog conditionally, and removing the condition so that it always rendered when the Dialog was open fixed the issue.
I am facing issue while interacting with any element in a modal popup. I am using ChromeDriver 2.46 and all tests which involves modal popup fails on Chrome 74.
I get below error
element is not clickable. Other element would receive the click
I have tried with scrollToTop, scrollToElement and visibilityOf but nothing worked. Has anyone faced similar issue?
Attach you html, and full error stack
Meanwhile here is my assumption which is 90% likely what your problem is
Lets assume your html is something like
<div>
<button></button>
</div>
your button is visible... but so is div element. BUT because wraps the button, it is above the button (has higher z-index). That's why when you click button, div gets this click, which protractor doesn't let happen. And fails
In this case just simply use js click
browser.executeScript(
"arguments[0].click();",
$element.getWebElement() // substitute $element to your elementFinder
)
this will work because element gets the click regardless of visibility and the page layout
I suspect that Driver version and chrome version incompatibility could be the reason for your problem. Since chrome driver 2.46 supports v71-73 and you are using v74. We also observed that there are many evident instances of this. I would suggest first make sure that drive and chrome browser compatibility before running any test case.
Refer this link for browser and driver compatibility
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.