How to open dialog in another control?

[leonardjohn]

Dear guys, just want to know how to open custom dialog in another component control? e.g.: ParentComponent.tsx: import CustomDialog from "CustomDialog" export class ParentComponent { ... public render() { return ( <Button onClick={()=>{this.showDialog()}} ); } public showDialog() { //How to show/hide dialog here? } ... }

CustomDialog.tsx: import Dialog from "@fluentui/react-northstar"

export class CustomDialog { public async componentWillMount() { this.setState({open:false}) } public setOpen() { if (!this.state.open) this.setState({open:true}); else this.setState({open:false}); } public render() { return ( <Dialog open={this.state.open} .../> ); } } export default CustomDialog

thanks in advance

[gouttierre]

@leonardjohn - Thanks for filing this, but you’ll need to add a CodePen repro before we can help. You can start from one of the COMPONENT examples (click “Export to CodePen”) or https://aka.ms/fluentpen.

[leonardjohn]

@gouttierre many thanks for your update. please find the source code on CodeSandbox here:https://codesandbox.io/s/stoic-nash-df2e8 two problems here:

1. how to open dialog "CommonDialog" when i click "Open Dialog" button in App.js?
2. How can I use "Form" tag to generate dialog content, instead of \<div>? i tried to find the doc here:https://fluentsite.z22.web.core.windows.net/0.51.7/components/form/definition but it cannot meet my requirement req: how to render an input and a dropdown inside an readonly input?

thanks in advance.

[leonardjohn]

@gouttierre @khmakoto any update on this?

[msft-fluent-ui-bot]

@khmakoto

Gentle ping that this issue needs attention.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.