Hi, I am using the Dialog component to show a serie of tags which the user can choose from. The web part has two views. The landing view shows all the thags and the posibility to click on them and save them. That part is working:
The second view is the Dialog component itself, the problem here is that when the user click on a tag it is the firs view who react to click event and the Dialog component doesn’t show any change. (with change I mean a different color).
In the second image I clicked on the Sales tag in the Dialog component but it is the sales tag in the lading view the one that get the red color whe it should be the one in the Dialog component that gets the red color.
This is the render method in my application:
public render(): JSX.Element {
return <div className={styles.tags}>
<div className={styles.tagsCloud}>
{this.state.items.map((tag, index) => this.renderTags(tag, index))}
</div>
<div>
<a className={styles.allItemsLink} href="#" onClick={this._showDialog}>View all topcis</a>
</div>
{this.state.showButton == true ?
<div>
<DefaultButton
text="Done"
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={() => this.savetags()}
/>
</div> : null
}
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: true,
}}>
<div className={styles.tagsDialogContainer}>
{this.state.items.map((t, index) => this.renderTags(t, index))}
</div>
<DialogFooter>
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>
</DialogFooter>
</Dialog>
</div>
}
And this is the method that render the tags:
private renderTags(tag: Tag, index: number) {
return <div className={`${styles.tag} ${tag.active == true ? styles.tagActive : ''}`}
onClick={(e) => { e.stopPropagation(); this.collectTags(tag, index); return false; }}>
<span># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></span>
</div>
}
The landing page and the Dialog component uses the same render method and the same collectTags method to pickup the clicked tags before they get saved. The collectTags method looks like this:
private collectTags(tag, index): any {
let selectedTags: Tag[] = this.state.selectedTags;
var allItems = this.state.items;
allItems[tag.id - 1].active = true;
selectedTags.push(tag);
this.setState({
items : allItems,
showButton: true,
})
}
Why is the Dialog component not reacting to the click event? and the lading view is getting the clicked element from the Dialog component?
Best regards Americo