-
Notifications
You must be signed in to change notification settings - Fork 1
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
[Tagging] Assign taxonomy to organizations #117
Comments
@ali-hugo I don't think we'll have time/budget here to implement your exact design, especially since Paragon doesn't yet have a working multiselect component. What do you think about using a simpler design where we show the list of currently assigned orgs usings chips (like in your design now, but not inside of a multiselect, just above on the page), and then using a Form.autosuggest component to allow adding additional orgs one at a time? I think you actually had a design like that previously... something like this: Assign to Organizations Currently assigned: [ Org 1 Chip x ] [ Org 2 Chip x ] Add another organization: [ Form.Autoselect ⌄ ] [ ] Assign to all orgs Also, can you confirm if checking "assign to all orgs" should disable the controls above? |
Hi @bradenmacdonald! CC @ali-hugo It is not possible to clear the input the right way because the Autosuggest component does not forward the ref of the input (as other components usually do). |
@rpenido That seems like a bug in paragon. The
What do you mean? You shouldn't need a ref to the |
It uses the const [state, setState] = useState({
displayValue: value || '',
errorMessage: '',
dropDownItems: [],
}); This <FormControl
...
value={state.displayValue}
...
/> After the first render, the setState(prevState => ({
...prevState,
dropDownItems: [],
displayValue: clickedValue,
})); It could not always render the I tried to clean the input value using I'm not seeing an easy solution to improve it here. |
I have a PR out to rework the Autosuggest component a bit (with breaking changes) here: openedx/paragon#2899 Is there any chance you could try out that version of the component? I'd be more than happy to update that PR to include solutions for any issues it doesn't solve!
I brought this up in the Paragon working group meeting today and I will be looking into possible short term (read: small code change) fixes today. Once a short term fix is in place, the plan is to look into how to best integrate z-index hooks into Paragon. edit: After some quick testing on https://deploy-preview-2899--paragon-openedx.netlify.app/components/form/form-autosuggest/ I found that the display value in the text box is still not being updated when the value is updated from outside of the component. I used this in the jsx live box to test: () => {
const [value, setValue] = useState({});
const [valueRequired, setValueRequired] = useState(false);
const [selectionRequired, setSelectionRequired] = useState(false);
const [customValidation, setCustomValidation] = useState(false);
const customError = () => customValidation ? value.selectionId !== "c-option-id" : false;
return (
<>
<button onClick={() => setValue({})}>Clear Value</button>
<Form.Group>
<Form.Label>
<h4>Programming language</h4>
</Form.Label>
<Form.Autosuggest
aria-label="form autosuggest"
helpMessage="Select language"
value={value}
onChange={(v) => setValue(v)}
valueRequired={valueRequired}
valueRequiredErrorMessageText="Error: value required"
selectionRequired={selectionRequired}
selectionRequiredErrorMessageText="Error: selection required"
customError={customError()}
customErrorMessageText="Error: selected language less than 50 years old"
>
<Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
<Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
<Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
<Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
</Form.Autosuggest>
</Form.Group>
<Form.Group>
<Form.CheckboxSet isInline>
<Form.Checkbox checked={valueRequired} onChange={e => setValueRequired(e.target.checked)}>Value Required</Form.Checkbox>
<Form.Checkbox checked={selectionRequired} onChange={e => setSelectionRequired(e.target.checked)}>Selection Required</Form.Checkbox>
<Form.Checkbox checked={customValidation} onChange={e => setCustomValidation(e.target.checked)}>Custom Validation</Form.Checkbox>
</Form.CheckboxSet>
</Form.Group>
<Collapsible styling="basic" title="Value details">
<Row>
<Col xs={3}><pre>userProvidedText:</pre></Col>
<Col><pre>{value.userProvidedText}</pre></Col>
</Row>
<Row>
<Col xs={3}><pre>selectionValue:</pre></Col>
<Col><pre>{value.selectionValue}</pre></Col>
</Row>
<Row>
<Col xs={3}><pre>selectionId:</pre></Col>
<Col><pre>{value.selectionId}</pre></Col>
</Row>
</Collapsible>
</>
);
} Before clicking "Clear Value" we see I will work to update the PR to address this. |
Thanks @brian-smith-tcril ! |
Thank you @brian-smith-tcril! I think this will cover our use case.
I took a fast look at the code and didn't find any immediate problem. 😞 From my side, I managed to clear the component using: const inputRef = document.querySelector('.pgn__form-group input');
inputRef.value = null;
const event = new Event('change', { bubbles: true });
inputRef.dispatchEvent(event); |
I have a PR out for the overflow issue here openedx/paragon#2939 I've made some progress on setting/clearing the value on my other branch, I'll take another pass at it today and share once I get it to a point I'm happy with. |
I'm happy with the value clearing implementation I have in this PR now (preview here). If you pull in the updated example code from #117 (comment) (I switched |
@bradenmacdonald Sorry for the delayed response; today is my first day back from leave.
I'm happy with that approach :)
Yes, if the user selects “assign to all organizations”, the dropdown for assigning individual orgs disappears (sorry, I see I forgot to update this in the design - I have done so now). |
"As a global staff member, I can assign taxonomies to organizations."
"As a global staff member, I can assign a taxonomy to all organizations."
"As a global staff member, I can assign a taxonomy to no particular organization."
Relates to #108 , #116 , and #109
Acceptance Criteria
Developer Notes
Multiselect
component in Paragon based on React Select Multi, but the project has been on hold.The text was updated successfully, but these errors were encountered: