when removing element from form array with react-final-form, the displayed value of the <input> does not update, but final-form data object does - react-final-form

This is a bizarre situation. I have simplified an example of react-final-form-array that allows me to add elements to my form, and i can extend an array of objects. It is very similar to the simple example provided by react-final-form-arrays. The array works just fine, but the issue im having is that when i try to REMOVE a specific element, the actual value displayed in the inputs doesnt change. So for example, with images:
Here we can see i can add customers to a list, which makes an array of objects. This works great. Now, let's say i want to get rid of the first element. i click the X, and what happens?
Here we can see that the form data properly removed the first element i wanted to remove, however, the actual value DISPLAYED on the inputs is still John Doe, though the form knows it's Mary Jane. When i click on the inputs, they seem to update to the correct values. But this is not what should be happening.
The STRANGEST thing though, is that i made a codesandbox you can see here https://codesandbox.io/s/agitated-wilson-5xlqq
It has the exact same code I have on my app, and it works as expected! So i cant even recreate the bug and i made sure the dependencies are the same versions im working with. I can only recreate it in my own setup, and i dont understand why that is.
I tried with chrome, safari and firefox and they all seem to be doing the same thing on my computer and i even tried on my phone by connecting to my react server that runs on my laptop, and they all show the same behavior.
I dont know what i could be, versions, react, if anyone has any idea or has had a similar issue in the past, PLEASE HELP. I won't paste my code here so as not to bloat this post, but you can see it's literally the exact same code in the sandbox i linked above.
EDIT: I want to point out another bug that occurs, and thats once i remove the first element, if i try to edit it, it pushes another field into the array with the input i just added, as if it were bound or something. I wish i could recreate it on codesandbox

Try deleting your node_modules folder and reinstalling them. Are you seeing any errors in your console log?

Related

UI5 UploadCollection Issue

I have an UploadCollection in my XML view bound to a JSONModel. When I add / delete files in the collection all works good initially. When I save the required data to the database and then refresh the JSONModel from the database I get the attached error. It is as if the elements are not being removed from the DOM, however, when I look at the entire process via the Chrome debgugger the elements are indeed gone in between. I am currently using OpenUI5 v1.78.1 but the same issue occurs with the latest (v1.86.3). The UploadCollection fails to work again from then on and I need to destroy it in my view before the data will be displayed again.
Has anyone seen this or have advice on how it may be corrected?
I figured it out. It appears that when I was calling UploadCollection.removeItem(item); it did not unregister the element somewhere and held onto the idea that the HTML elements still existed. Using item.destroy(); instead solved the issue.

Filter not working on Tablesorter 2.17.8 > probably my bad

Been working on getting the UITheme Widget (Bootstrap v3.x) version going to behave exactly the same as this. https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html.
Paging & sorting are working fine. When I click on a search box in the 2nd row to type something, for some strange reason, the sort feature fires & as I type nothing happens.
Ive checked over the head code to compare with the documentation & they are the same. When I inspect with Chrome, I can see an additional class of table sorter-header-inner yet this is not in the code of the 2nd row (search row)
An example page with my code can be found here
It could very well be that I have not added a css file or something. Ive searched the files that come with the download above & can't seem to find any additional files related to a filter widget.
Would really appreciate some assistance getting this nailed.
Thanks in advance.
Todd
Thanks #Mottie, Little bit embarrassing & a trap for new players but I found myself inspecting elements & copying that code directly into the header. not following your documentation to the letter & simply having say English and letting all the magic happen behind the scenes... I'm probably not the first person to have tried this but hope other newbies benefit from me sharing

Changing a subarray in document will not rerender with proper order

I am using jQuery UI sortable to update the order of an array stored in a container document. When the sort fires the "stop" method, it rebuilds the array and orders it based on the new DOM layout. It all works fine and the updated document reflects the proper order. HOWEVER, the dom reloads and the order is back to what it was.
When I physically refresh the page it actually shows the proper order. It's just that on-the-fly changing of the array won't just re-render itself properly.
Interestingly enough, this problem has only cropped up in 0.9.4, so it may be a bug with meteor, just not sure if there was a change that would affect what I'm trying to accomplish.
I'd provide code examples if needed, but since the code itself seems to be working properly and the each not updating to reflect the order, i'm not sure it'll help at all.
Thanks!
UPDATE
I've put together a standalone demo of the problem, listed out in my comment below:
Ok, here's a crazy example of the issue:
demo: app-9ryym2m2.meteorpad.com
source: meteorpad.com/pad/uQ42DRH95JcHtKnb9
Try doing some sorting of items to see part1 of the issue. Next, after sorting, try hitting the togglers a few times, especially within the list of items you sorted. That's part2 of the issue. Now, if you refresh the page, everything gets caught up. Wat.
Double Update
Thanks to aldeed over at Github, I've got a solution: https://github.com/meteor/meteor/issues/2944
By changing my sub-document reference key from 'id' to '_id', Blaze seems to pick up on the changes to sorting no problem!
I confess that I haven't dug into your code, but the way it is updating indicates that you are picking up the previous state rather than the updated state. Wherever you drag, the final state reflects the last place you dragged to (even though it was probably in the wrong place when you started). Perhaps an order-of-execution/async bug?
Have you seen the drag and drop demo that was put together for blaze by Avital Oliver (Meteor core dev) when the blaze rendering engine came out? You can watch a video and check out the repo. If you try the demo and it fails on the current version of Meteor, you can submit an issue there and get some support from the pros :)

JSF 2 f:subview not seeing my changes reflected in the UI

Update It appears I have to rebuild/redeploy the app to see the changes. Anyone know why I have to do this? It's a static .xhtml page. Coming back to update, looks like I just have to stop/restart the server, not a rebuild. I was dumb and didn't try that first, mostly because I have to rebuild/deploy often anyways.
I'm working on a JSF 2 app that uses f:subviews. I'm on one subview where my changes aren't reflected in the UI when I refresh the browser. I've worked on other subviews where I don't have this problem.
I have a batch script which copies my .xhtml files into my installed apps folder. The batch script reports the file is copied over. It's business as usual... If I drill down into this particular installed app, I see my change in the file. Again, seems like business as usual. The change is not reflected in the UI when I refresh, however.
These are simple text changes I'm making, but not seeing.
The problematic subview doesn't appear to be anything special, it's just a p:datatable that's included via a ui:include with a couple of parameters for the data and to give it a unique id. If I replace the p:datatable with just simple text, the "old" table still shows up in the UI when I refresh. I just can't get any changes in this subview to be reflected in the UI.
Console doesn't throw any errors.
I'm using WebSphere 7.0.
Never encountered this problem before. It isn't a browser caching issue as I can edit other subviews and see those changes when I refresh the page.
Anyone have any ideas?

Strange routing error in ROR on my dev machine

When I log in on my dev machine in an ROR application, I should be redirected to http://sitename/user/dashboard. This was happening successfully before, till I began developing on it :). Now it tries to go to http://sitename/user/images/navarrow, which results in the error ActionController::UnknownAction (No action responded to images).
I hadnt changed anything in the code except layout,views-level changes, no actions etc were changed. Then I reverted to a previous version to check, and it worked fine. I reverted back to my latest version and it again worked fine. So the problem doesnt seem to be in code, but somewhere else. I want to know why exactly this problem crops up every now and then. The fix is not hard, i just have to revert to a previous commit and then come back to latest commit, but I cannot figure out how it tries to redirect to a wrong url in the first place. Do I need to change some configuration to make it not happen again?
UPDATE: I had to work on the UI of the login form as well. Now when I created a login form with the required css, and tried to submit, this is what i get:
Parameters: {"format"=>"jpg", "action"=>"images", "id"=>"galway", "controller"=>"user"}
ActionController::UnknownAction (No action responded to images):
As you can see, I get another different faulty url, the prvious one had :id=>'navarrow'. SO I get the same error as above of a faulty url creeping out of nowhere! But wehn i go back and refresh, i discover that i actually am logged in, so the new login form is working as expected. i think if i commit my code now, and then go thru th process again, it will work again, but this bug is driving me crazy!
I think i figured it out partially. In the page, there were two images, entered like so:
<img src="images/nav_arrow.jpg".../>
<img src="images/galway.jpg".../>
So for some reason when a form got posted, and we were redirected to another page, somehow it also tried to map its request to controller/images/nav_arrow.jpg etc, and this was causing the unexpected behavior. But I still have to figure out why this error does not always crop up. I change image paths to absolute ones to make it work!
I'd check that you don't have something sneaking in .htaccess files to your directories (maybe one got accidentally checked in)?

Resources