Merge pull request #12332 from ToolJet/fix/select-popover-save

Fix/select popover save
This commit is contained in:
Johnson Cherian 2025-03-21 13:59:40 +05:30 committed by GitHub
commit c5ae6684a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 5 deletions

View file

@ -295,7 +295,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
</div>
<div className="field mb-2" data-cy={`input-and-label-column-name`}>
<CodeHinter
initialValue={isMultiSelect ? `{{${markedAsDefault.includes(item.value)}}}` : item?.default?.value}
initialValue={isMultiSelect ? `{{${markedAsDefault.includes(item?.value)}}}` : item?.default?.value}
theme={darkMode ? 'monokai' : 'default'}
mode="javascript"
lineNumbers={false}
@ -372,7 +372,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
<div className="w-100" {...droppableProps} ref={innerRef}>
{options?.map((item, index) => {
return (
<Draggable key={item.value} draggableId={item.value} index={index}>
<Draggable key={item?.value} draggableId={item?.value} index={index}>
{(provided, snapshot) => (
<div
key={index}
@ -386,8 +386,13 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
placement="left"
rootClose
overlay={_renderOverlay(item, index)}
onToggle={(isOpen) => {
if (!isOpen) {
document.activeElement?.blur(); // Manually trigger blur when popover closes
}
}}
>
<div key={item.value}>
<div key={item?.value}>
<ListGroup.Item
style={{ marginBottom: '8px', backgroundColor: 'var(--slate3)' }}
onMouseEnter={() => setHoveredOptionIndex(index)}
@ -399,7 +404,7 @@ export function Select({ componentMeta, darkMode, ...restProps }) {
<SortableList.DragHandle show />
</div>
<div className="col text-truncate cursor-pointer" style={{ padding: '0px' }}>
{getResolvedValue(item.label)}
{getResolvedValue(item?.label)}
</div>
<div className="col-auto">
{index === hoveredOptionIndex && (

View file

@ -327,7 +327,12 @@ class TableComponent extends React.Component {
placement="left"
rootClose={this.state.actionPopOverRootClose}
overlay={this.actionPopOver(action, index)}
onToggle={(showing) => this.setState({ showPopOver: showing })}
onToggle={(showing) => {
if (!showing) {
document.activeElement?.blur(); // Manually trigger blur when popover closes
}
this.setState({ showPopOver: showing });
}}
>
<div>
<List>
@ -649,6 +654,7 @@ class TableComponent extends React.Component {
if (show) {
this.handleToggleColumnPopover(index);
} else {
document.activeElement?.blur(); // Manually trigger blur when popover closes
this.handleToggleColumnPopover(null);
}
}}