Rux Notification

[jldayhoff]

Hello,

I am using the following code in a React function. The Astro notification is always displayed. I only want it displayed on an error and have the user close the notification. I even set 'open' to 'false' , but it still renders the notification. Any help is appreciated.

<RuxNotification className='aem-rux-notification' message='' open={showError} small='True' status='critical' ruxclosed = {(e) => { closeNotification(); }}> </RuxNotification>

[micahjones13]

Hey there @jldayhoff , thanks for opening this discussion!

I'll be making a codesandbox so I can better test, but the first thing that jumps out to me is the ruxclosed listener. The events in react have the prefix of onRuxfoo, so in this case the ruxclosed listener should be onRuxclosed. Does that help solve the issue? If not, I'll keep looking into it!

[jldayhoff]

I appreciate the quick feedback. The notification is still displayed even when open is set to false. I changed the property to onRuxclosed, but the component doesn't register when clicked.

return ( <div> <div>{promiseInProgress ? <DotLoader color={'#ffffff'}/> : <form id='drag-drop-form' onDragEnter={handleDrag} onSubmit={(e) => e.preventDefault()}> <input ref={inputRef} type="file" id="input-file-upload" multiple={false} onChange={handleChange} /> <label id="label-file-upload" htmlFor="input-file-upload" className={dragActive ? 'drag-active' : '' }> <div> <button className="upload-button" onClick={onButtonClick}>Click or Drag and Drop to Upload AEM</button> </div> </label> { dragActive && <div id="drag-file-element" onDragEnter={handleDrag} onDragLeave={handleDrag} onDragOver={handleDrag} onDrop={handleDrop}></div> } </form>} </div> {<RuxNotification className='aem-rux-notification' message='' open='False' small='True' status='critical' onRuxclosed = {(e) => { closeNotification(); }}> </RuxNotification>} </div> );

[micahjones13]

Ah, I think I see the issue then. The open prop is a boolean, so it should look like open={false}. Here's a codesandbox example. Also to note, the small prop is also a boolean prop. It's working in this instance because having small="True" evaluates to true since the small prop has a value.

[jldayhoff]

still "scratching" my head on this one..
<RuxNotification className='aem-rux-notification' message='Message' open={false} small={true} status='critical'> {''} </RuxNotification>

Using astrouxds/astro-web-components = 6.14.0
astrouxds/react= 6.9.0

The notification still persistently renders. I restarted the container. I might try upgrading to the latest, but I am uncertain as to what that might break. (RuxModal I am certain). I appreciate the help thus far.

[micahjones13]

Interesting. I've updated the sandbox to include the versions you're on, and I'm still seeing it open and close. If restarting the container doesn't help, could you try out some of your code in a codesandbox or some other code editor to see if this bug can be reproduced?

On a side note, @astrouxds/react comes with @astrouxds/astro-web-components as a dependency, so you shouldn't need to install both explicitly unless there's some edge case here I'm not aware of, which is totally possible.

[micahjones13]

Also on the topic of upgrading to latest, here's a migration guide of the changes you can expect if you want to upgrade. To save you some time, the highest impacted components are

• Modal/Dialog
• Notification (although I don't think any changes in 7.0 would effect your current issue)
• Pop up