Embedded alert: state change causes the infinite recursion

[superwhykz]

Issue summary

I am not sure what is happening but it seems on the state change causes the infinite recursion.

Expected behavior

The embedded alert should pop up.

Actual behavior

Steps to reproduce the problem

From Page component

handleCreateChange() {
    switch (this.props.tab) {
      case 0:
        if (this.props.list.length === 1) {
          this.props.setDisableCreate(true);
  ...
  ...
  ...
}

...
...
...

     },
        ]}
        primaryAction={{
          content: 'Create Rule',
          onAction: () => this.handleCreateChange(),
        }}
      >
        <Alert
          title="Reached limit"
          open={
            this.props.disableCreate &&
            !this.props.isFetching
          }
          confirmContent="Close"
          onConfirm={() => this.handleCreateChange()}
        >
          <TextContainer>
            <p>
              You can only modify existing set of rules!
            </p>
          </TextContainer>
        </Alert>

Specifications

• Are you using the React components? (Y/N): Yes
• Polaris version number: 2.4.0
• Browser: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
• Device: MacPro
• Operating System: MacOS Sierra 10.12.6

[dleroux]

@superwhykz Thanks for letting us know! I'll open an issue internally and keep you posted.

[superwhykz]

@dleroux thanks so much!

[dleroux]

@superwhykz turns out that for security reasons we can only accept strings in the Alert. Remove the TextContainer and the <p> and it will be fine. Changing our internal issue to make that more clear in the future. Thanks for reporting this. I'll close this now.

[superwhykz]

Ehh ..... thanks so much for quick turn around!