I am using the redux-form-material-ui DatePicker as described in the docs. However it just throws these errors.
React does not recognize the transitionAppear, transitionAppearTimeout, transitionEnter and transitionEnterTimeout props on DOM element...
I checked it in the developer tools and these transition properties are actually passing down to the child div from it's parent CSSTransitionGroup.
Due to this, the DatePicker dialog is not working as expected. I have already spent more than a day on this but can't seem to get it working. Please help me out!
The exact Bug you are reporting is discussed here: "Unknown props transitionAppear, transitionAppearTimeout, transitionEnter, transitionEnterTimeout and ripples #9328".
User kaytrance said: "It turned out that material-ui uses react-transition-group v1.x, but a chart library that I use has dependency on v2.x. So I had to put an older version of chart library in order to get rid of that errors.".
A further comment from user kevincolten was: "You can bring in both react-transition-groups in your package.json
"react-transition-group": "^1.2.0",
"react-transition-group-v2": "npm:react-transition-group",
".
The example given in your question runs fine on my browser.
Since you haven't provided your code (and modifications?) or a CodeSandbox (which is OK for me) I had to use a different example to reproduce the same error and determine the appropriate fix.
I get from this sandbox:
Warning: render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app.
Warning: React does not recognize the staticContext prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase staticcontext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in a (created by Link)
in Link
in CourseLink (created by Route)
in Route (created by withRouter(CourseLink))
in withRouter(CourseLink) (created by Course)
in li (created by Course)
in ul (created by Course)
in div (created by Course)
in Course (created by Route)
in Route (created by BasicExample)
in div (created by BasicExample)
in Router (created by BrowserRouter)
in BrowserRouter (created by BasicExample)
in BasicExample
No Results
That error was reported here "React does not recognize the staticContext prop on a DOM element".
The suggested fix from user timdorr is:
"You should do what NavLink does and wrap it in a Route inside CourseLink: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js ".
The Animation-Add-on isn't recognized.
That is due to the incorrect dependency, loading both is easier than fixing the one.
Related
I have a panel used in multiple pages in an app we're developing. In this panel is a FileUploadField that uses AjaxFormSubmitBehavior (extended as FileUploadBehavior) on "change" to upload a file, which I then add to a list via ajax, update the view, clear the FileUploadField, and then allow them to select another file. And this is in fact exactly what happens in one of the pages using the panel...but not in another. In the non-working page, the first file selected is repeated over and over regardless of what file is picked after the first.
In the onSubmit of the behavior, we get the the FileUpload object which is supposed to be different between requests. I can see in the debugger that the FileUpload is the exact same object as the previous request, not merely carrying the same payload.
I'm scrutinizing the usage of the panel on the two pages and see no material differences. I can see the file control on the page DOES show the changed file name while I sit at my breakpoint on the server (so I suspect whatever is going wrong is on the java side). But I can't figure out why they behave differently or see where it's going wrong. The panels and pages are large and complex, so here's snippets of the relevant pieces.
FileUploadBehavior.onSubmit(AjaxRequestTarget) :
FileUploadField fileUploadField = (FileUploadField) fileUploadContainer.get("fileUploadField");
FileUpload fileUpload = fileUploadField.getFileUpload();
[...]
//clear file input after each request for next upload.
fileUploadField.clearInput();
target.add(fileUploadField);
I have a break right after this line and can see the first file gets repeated. The code that instantiates the field and behavior in the panel looks like:
FileUploadField fileUploadField = new FileUploadField("fileUploadField");
fileUploadField.add(new FileUploadBehavior("change", maxFileSize).setDefaultProcessing(false));
fileUploadContainer.add(fileUploadField);
The html tag:
<input wicket:id="fileUploadField" class="form-control" type="file" id="formFile" multiple>
I feel like the fact that it works in one page and not in another leads me to think the problem is outside the panel. The fact that the control in the browser shows the 2nd filename during test leads me to think it's on the java side. But nothing about the file event or definition happens outside the panel itself. The form elements are declared identically, and both have multipart enctypes when the pages render. Both successfully upload their first file. I'm kind of not even sure where to look for why wicket is re-using the FileUpload object in one page but not in another.
I should mention that we use Apache Wicket 6.26.
update: I looked into the source of FileUploadField, and it has an explicit check on whether FileUploads is null in it's internal property, and if so returns it without checking the actual request. I don't see any way to clear this value between requests. clearInput() doesn't affect it from what I see. I'm more confused by how this is working in one page than why it's not in the one where it doesn't now. I also don't know how to make the class 'reset' between requests.
Okay, figured this out. As martin-g pointed out, the fileUploads is set null in onDetach(), which I discovered about an hour after my update. The problem is that the onDetach() first tries to null out the model object. But that method was blowing up because there was no method 'fileUploadField' on the model attached to the form which was a compound property model. The page that worked does NOT use a compound property model for the form. For some reason, when this error occurred, it was being swallowed somewhere in the call stack and did not end up in my console log.
My solution was to provide a local model to the fileUploadField since that's not how I'm interacting with the control anyway (I'm using ajax and getting the FileUpload directly each time). That fixed it. It now works everywhere.
Greetings and salutations!
I'm working on a UI automation project for a windows desktop app (FrameworkId: Win32)
Stack: Python (3.7) + Appium (1.15.1) + WinAppDriver (v1.1).
I have identified an element using Inspect.exe, but when I try to code, whatever I do I receive this error:
selenium.common.exceptions.NoSuchElementException: Message: An element could not be located on the page using the given search parameters.
The locator strategy I'm using is xpath:
self.driver.find_element_by_xpath("//*[#LocalizedControlType='text' and #IsControlElement='false']")
As you can see, Inspect.exe has shown that it has the property "IsControlElement='false'", but I cannot for the life of me "access" it via code.
I would also like to point out that any elements that had the IsControlElement='true' are properly found and I can "interact" with them.
Thank you very much for your help!
Source of issue
This is probably an issue within Microsoft's UI Automation implementation in .NET.
The property IsControlElement should have returned true while it didn't.
From my tests, it seems to be an issue somewhere within UIAutomationCore.dll.
I speculate that the root cause is that the automation implementation was targeted for accessibility in mind, and they have mistakenly ignored some controls which are NOT readable (Image, Geometry, etc.).
Workaround for some cases
Try to use UI control from a type that has a text.
if it's already a textual control, try to use a different textual control type. for example - in WPF project - use Label instead of TextBlock
if it's NOT a textual element, if possible, wrap the control in a textual element. in WPF projects you can use a <Label Padding="0"> as a wrapper.
Other things to consider
Try to use UIAComWrapper
Related issues
https://stackoverflow.com/a/46452431/426315
UIAutomation won't retrieve children of an element
UI Automation - #32770 (Dialog) shows in Insepct.exe but not in VisualUIAVerifyNative.exe
Side Note
Since you haven't specified which Python GUI library are you using, I was not able to provide examples for your library. Sorry.
My question is very basic on one hand but on the other hand the general situation is more complex, plus I cannot really get any working sample.
I'm developing/maintaing a web-application which is currently in transition from GWT code base into Ember.js.
Most of the newer code already relies on Ember.js and I think it's really awesome.
The problem is we cannot use Ember Router as all the request are being handled by the GWT.
In order to enabled the application run in this unusual configuration we have special JavaScript files that create our Ember main objects (Controllers & Models) for us.
As you can imagine navigation between tabs is cumbersome and is handled by GWT who creates Ember objects when needed. We are in transit toward a brave new world Ember Router and all.
But in the meantime, this is the problem I'm facing right now.
The user clicks a link which opens a page that contains some Ember based table.
The data is retrieved form the server using some Ajax code. Upon success it spawns a forEach loop which tries to pushObject all the received date into our Ember based components.
My problem happens when the user quickly switches between tabs. In this case the first list of object has not finished rendering yet and suddenly there's a new set of objects to handle. This causes Ember to throw errors like:
"Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. "
and
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."
Is it possible to prevent the loop from trying to render?
I've tried checking if the controller in question is already inDOM and it is, is there a way to notify Ember this object is no longer valid?
Sorry for a lengthy question and lack of running sample.
I'd probably modify the switch tab code to only execute afterRender has completed, that way you aren't mucking with ember objects while they are being used.
Ember.run.scheduleOnce('afterRender', this, function(){
// call GWT switch tab routine
});
Thank you Daniel and Márcio Rodrigues Correa Júnior. eventually what I did is to add a patch that would check the current context of the application (in my case the currently selected tab). If upon receiving the AJAX response the application is in the correct context (meaning the user haven't change the tab) go on. Otherwise just ignore the response and do not try to render it.
Now it seems to be working
For example, I have an ajax request and it returns <script src='buggy.js'></script>.
Problem is, it doesn't show up in sources or resources panel. That means I can't do all the cool stuffs like adding breakpoint and inspecting the elements as they run.
I could only see the source of the js file under the Network panel.
Is there anyway to make chrome add them to the sources panel?
Or how do you guys go about debugging dynamically added scripts?
Using Canary.
I was having the same problem, and I found a workaround that is better than the deliberate exception. It does still require changing the code as opposed to just setting a breakpoint inside the chrome dev tools.
I tried using the "//# sourceURL=dynamicScript.js" that was suggested as a workaround by the OP, but it still wasn't showing up for me unless it already existed in my tabs from a previous time when it produced an exception.
Coding a "debugger;" line forced it to break at that location. Then once it was in my tabs in the Sources panel, I could set breakpoints like normal and remove the "debugger;" line.
Please refer to https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript
(Original link is broken-- archived link below)
http://web.archive.org/web/20141016164821/https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript ("Breakpoints in Dynamic JavaScript").
I'm using the JSTreeGrid in an ASP.NET application. The implementation of the JSTreeGrid works fine in the application in which it was designed in tested. However when I moved it over to another application I recieved the following error message below:
Microsoft JScript runtime error: Object doesn't support this property or method
When I initially moved the implementation over I discovered and corrected issues related to the new application forms utilizing Masterpages. The container names were concatenated to the div tags and the scripts were not finding the declared div tag IDs specified in the script. The application that I moved it from did not use Masterpages. I feel resonably certain that the error is related.
The error occurs in the _prepare_grid: function in the jstreegrid script when obj.each(function () section of script is run.
Any insight would be appreciated. Thanks
When you use master pages the Client ID of your DOM elements ia manupulated by the server.
This is due to the chace that you will use the same id both in the master page and in your derived page... when calling Jquery function i would guess that you use id selector i.e. $('#someID').doSomething() ...
When using master one of the solutions is to use the following selector as an exmaple:
$('[id$=myButton]').click(function(){ alert('button clicked'); });
This means that Jquery will select the element with an ID attribute that end with 'myButton'.
for more information follow this post.
How to use JQuery with Master Pages?