GovAlta
fix(#1980): provide control to how dropdown items are added after ini…
…tial mount
Before (the change)
Adding new dropdown items would result with them being appended to the end of the list
After (the change)
https://jam.dev/c/b73edae1-678e-478c-a35b-358c8452d539
Make sure that you've checked the boxes below before you submit the PR
- [x] I have read and followed the setup steps
- [x] I have created necessary unit tests
- [x] I have tested the functionality in both React and Angular.
Steps needed to test
Angular
import { Component } from "@angular/core";
@Component({
selector: "abgov-root",
templateUrl: "./app.component.html",
styles: ``,
})
export class AppComponent {
title = "angular";
selectedColor = ""
colors = [
{ value: "red", mount: "append" },
{ value: "green", mount: "append" },
{ value: "blue", mount: "append" },
];
addColors(mount: string) {
const newColors = [
{ value: "cyan", mount: mount },
{ value: "violet", mount: mount },
];
if (mount === "prepend") {
newColors.reverse();
}
this.colors = [...this.colors, ...newColors];
}
onChange(e: Event) {
selectedColor = (event as CustomEvent).detail.value
}
}
<goa-form-item label="Basic dropdown">
<goa-dropdown name="item" [value]="selectedColor" (_change)="onChange($event)">
<goa-dropdown-item
*ngFor="let color of colors"
[value]="color.value"
[label]="color.value"
[mount]="color.mount"
></goa-dropdown-item>
</goa-dropdown>
<goa-button (_click)="addColors('append')">Append</goa-button>
<goa-button (_click)="addColors('prepend')">Prepend</goa-button>
<goa-button (_click)="addColors('reset')">Reset</goa-button>
</goa-form-item>
React
const [selectedColor, setSelectedColor] = useState("green");
type Color = {
value: string;
mount: DropdownItemMountType;
}
const [colors, setColors] = useState<Color[]>([
{ value: "red", mount: "append" },
{ value: "green", mount: "append" },
{ value: "blue", mount: "append" },
])
function onChange(name: string, value: string | string[]) {
setSelectedColor(value as string);
}
function addColors(mount: DropdownItemMountType) {
const newColors = [{ value: "cyan", mount: mount }, { value: "violet", mount: mount }];
if (mount === "prepend") {
newColors.reverse();
}
setColors([...colors, ...newColors])
}
return (
<GoAFormItem label="Append items">
<GoADropdown onChange={onChange} value={selectedColor}>
{colors.map(c =>
<GoADropdownItem label={c.value} value={c.value} mountType={c.mount} />
)}
</GoADropdown>
</GoAFormItem>
<GoABlock>
<GoAButton onClick={() => addColors("append")}>Append colors</GoAButton>
<GoAButton onClick={() => addColors("prepend")}>Prepend colors</GoAButton>
<GoAButton onClick={() => addColors("reset")}>Reset/add colors</GoAButton>
</GoABlock>
)
Summary: There is an issue with selecting items from dynamically generated dropdown menus. When attempting to click on a dropdown item that was added dynamically, the selection fails to register.
Steps to Reproduce:
Using this code snip Select an item form dropdown the item is not showing as selected
import React, { useState, useEffect } from 'react';
import { GoAFormItem, GoADropdown,GoADropdownItem, GoAButton } from "@abgov/react-components";
function Bug1989Page(props) {
const [selectedColor, setSelectedColor] = useState("green");
function onChange(name: string, value: Date) {
setValue(value);
}
function addColors(mount: DropdownItemMountType) {
const newColors = [{ value: "cyan", mount: mount }, { value: "violet", mount: mount }];
if (mount === "prepend") {
newColors.reverse();
}
setColors([...colors, ...newColors])
}
type Color = {
value: string;
mount: DropdownItemMountType;
}
const [colors, setColors] = useState<Color[]>([
{ value: "red", mount: "append" },
{ value: "green", mount: "append" },
{ value: "blue", mount: "append" },
])
return (
<div>
<GoAFormItem label="Basic dropdown">
<GoADropdown name="item" value="" onChange={onChange}>
{colors.map(c =>
<GoADropdownItem value={c.value} mountType={c.mount} />
)}
</GoADropdown>
</GoAFormItem>
<GoAButton onClick={() => addColors("append")}>
append
</GoAButton>
<GoAButton onClick={() => addColors("prepend")}>
prepend
</GoAButton>
<GoAButton onClick={() => addColors("reset")}>
reset
</GoAButton>
<GoAButton onClick={() => addColors("sortasc")}>
sortasc
</GoAButton>
<GoAButton onClick={() => addColors("sortdesc")}>
sortdesc
</GoAButton>
</div>
);
}
export default Bug1989Page;
https://jam.dev/c/5ff74ec3-c1b2-4785-9691-a0c56010072c
Some of the sample code wasn't binding the value properly. Here is what I see when updating the playground code. I have made the updates to the test code in the original test code.
https://jam.dev/c/bee513ee-e065-4b30-a8df-f59303422df9
:tada: This PR is included in version 1.17.0-alpha.95 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.17.0-alpha.37 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.25.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.24.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 3.0.0-alpha.5 :tada:
The release is available on:
Your semantic-release bot :package::rocket: