everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
907 stars 47 forks source link

When we try to Import any Autocomplete on layer, layer get closed unnecessary. #15

Closed Nikhil-devloper closed 4 years ago

Nikhil-devloper commented 4 years ago

                            <ToggleLayer
                                closeOnOutsideClick
                                // provide placement config    
                                onOutsideClick={() => { console.log('closed on Outside click');}}                            
                                placement={{ anchor: anchor.BOTTOM_CENTER }}

                                // render-prop to render our layer
                                renderLayer={({ layerProps, isOpen }) => {

                                    return (isOpen && (
                                        <div
                                            // for calculation stuff\
                                            ref={layerProps.ref}
                                            className='detailed-filter-box'
                                            style={{
                                                // inject calculated positional styles
                                                ...layerProps.style,
                                                // backgroundColor: '#fff',
                                                // width: 600,
                                                // height: 500,
                                                // display: 'flex',
                                                // justifyContent: 'flex-start',
                                                // alignItems: 'center',
                                                // flexDirection: 'column',
                                                // fontWeight: 700,
                                                // borderRadius: 4,
                                                // padding: '20px'
                                            }}
                                        >
//Try to insert any auto-complete available 

                                        </div>
         ));
                                }
                                    // only render on `isOpen`
                                }
                            >
                                {({ toggle, triggerRef }) => {
                                    return (
                                        <div
                                            // only the `triggerRef` is required...
                                            ref={triggerRef}
                                            // ...the rest is up to you
                                            onClick={toggle}
                                            onFocus={toggle}
                                            role='presentation'

                                            className={'filter-btn more'}
                                        >
                                            Click
                                        </div>
                                    );
                                }}
                            </ToggleLayer>
everweij commented 4 years ago

Thank you for reporting the issue. I'm afraid I'm not entirely getting the problem here. Do I understand it correctly that when you try to open the layer, the layer closes immediately? Would you be so kind to put your code in a codesandbox, so we could reproduce the issue? Also, I see your using toggle for both onClick and onFocus, which are a bit suspicious. Could you try to remove onFocus for example, and see if that works?

Nikhil-devloper commented 4 years ago

Thank you very much for responding quickly. and also for your amazing component :+1: here is link, after clicking on auto-complete suggestion our ToggleLayer should not close.

Sandbox link https://codesandbox.io/s/heuristic-waterfall-vbynr?fontsize=14

everweij commented 4 years ago

Nice, thanks, this is very helpful 👍🏼 This indeed seems to be a bug and needs to be fixed. I'll put it on my todo-list, and will try to get back to you asap.

Nikhil-devloper commented 4 years ago

sure sir, waiting for your reply. as it requires in my current project. please suggest something.

everweij commented 4 years ago

I've just published 1.4.3, and the issue should now be fixed! Please let me know if you encounter any futher issues.

Nikhil-devloper commented 4 years ago

lot's of #respect & #love from India :dancing_men:

everweij commented 4 years ago

Thanks, appreciate it 👍:) !