Have a look at this sandbox, the object doesn't seem to have the value defined onClose.
Forked codesandbox:
https://codesandbox.io/s/wqqyrv5xjl
I'm no expert, but I do have an app that is using a Semantic UI React dropdown with multiple selections just like you are. I don't rely on onClose, but instead keep track of selection state using onChange. Every time I get a change, I update state with the new selections. In my case I update my Redux state, but if you prefer, you can keep it in React component state.
Related
This question has also been raised on the react-final-form github issues list at https://github.com/final-form/react-final-form/issues/939
I'm using Semantic React UI 2.02 with react-final-form 6.5.3.
First Issue
I have a controlled Semantic React UI dropdown on a component that gets its value from the parent. If I put the Dropdown component directly into a React Final Form Field it works as expected. I can clear the currently selected value in the dropdown by updating the state value. But when I use a component you can see it ignores any change the parents tries to make to the state.
Not many examples out there to help guide me unfortunately.
Second Issue
Issue was "fixed" in 6.3.1 but still appears to exist.
#544
If I try to pass multiple to a custom component the value is ignored and always false.
Link to sandbox here https://codesandbox.io/s/semantic-react-ui-react-final-form-how-to-clear-dropdown-4l17f?file=/src/index.tsx
Third Issue
If you implement a wizard form and use a Semantic React UI dropdown on one of those forms. When you try to move back, the value selected on the dropdown is lost. Can't figure out a way to set it back again.
Would appreciate the wisdom of other users. Thanks in advance.
So I'm in the beginning stages of learning Meteor and React and I just completed the tutorial on making a Todos list.
In the implementation we have a checkbox at the top that allows us to toggle between completed tasks and all tasks. This is set as a state.
There are also check boxes next to each task that can display a task as complete or not complete.
My question is, both of these check-boxes change in real time, yet only the former is designated as a state variable? Why is the task checkbox a prop?
The global checkbox is just linked to the state of the App component.
It gets more complex with the local checkbox of each Task component. The problem is that theApp component needs a global knowledge of all Task objects, e.g. to hide completed tasks.
Task components could hold the checkbox state, but it is not the way React works. In React, a parent component usually does not read the state of its children, but instead holds the state itself and passes relevant information the its children so that they can render it.
When a child needs to update some state, it does at the global level (see toggleChecked and deleteThisTask in the tutorial), so that its parent gets notified and rerenders the child. See here for another example.
Good explanation here (full version)
Is there a way to refresh a component or an application back to its initial state? I have an accordion navigator that stays on the most recently selected index even if I log out. Right now, my log out function takes me back to the login page which is at state(1). If I log back in and go into the accordion, it is on the last tab I had viewed.
I would like to be able to clear any data from the controls inside the nav and reset the nav back to its default. I thought something like,
public function logout():void{
currentState = "NotLoggedIn"
myAccordion.initialize(); }
would work but nothing happens. This is done in Flex 4.
I know I can make a huge loop clearing each control individually and setting the selectedIndex of the accordion to 0. I was hoping for a simpler solution.
It depends what you mean by "State".
If you have implemented states in your Flex Component, you can revert back to a previous state using:
component.currentState = 'myInitialState';
If you are not talking about states, explicitly, but rather about the internal values of the properties of the component, then Flex does not keep a history of those property values. You can keep track of them yourself and reset them in the manually.
Once you do that, your component will be, effectively, in the initial state.
Flex application is being made accessibility compliant. When a custom component is made visible based on some condition, the first item (either text or formitem or textarea) inside the component is skipped by Jaws. It reads from the second item. On pressing UP arrow, the first item is then read.
Is there a way to make the first item accessible without need for pressing UP arrow?
This is likely going to be related to focus management.
You're likely going to want to assign componentId.setFocus() to the first component in the current view when the view state changes.
You need to re-assess the focus when the state of your display changes. If you post how you are managing display state I can suggest exactly how to trigger that via an event or in your custom state method.
Also, if that doesn't work, try this once your screen is ready / state changed :
focusManager.moveFocus(mx.events.FocusRequestDirection.TOP);
I am displaying a combo box in something of a WYSIWYG preview. I want the user to be able to click on the combo box and see the options inside, but I don't want them to be able to change the value. I tried using preventDefault() on the change event but it doesn't work. I don't want to disable it because I do want the user to be able to "look inside" the dropdown.
So I'm trying to block the change, but can't. My next resort is to change the selected index back to what it was before the change, Is there any way to do this within the scope of a ListEvent.CHANGE event listener?
Current Workaround is to basically re-assign the controls selected item the same way I am defining the selected item when I originally build it (a default selection). So a user sees their change then it immediately changes back to the default selection.
Are you sure that a combobox is what you want? could you do the same thing with a list component that is not selectable?
update:
If you must use a combobox and you dont want the lag from listening for the event and resetting the control, I see two possible options. You could subclass the control and make your own. When you do, hijack any methods that set the value besides the initial selection.
Or, you could try something like this: http://wmcai.blog.163.com/blog/static/4802420088945053961/. The site seems like it is in another language but the code is still there. It will allow you to make your options disabled, so the user cannot choose one of the other options.
HTH