Folder doesn't get reloaded when it is renamed. #4223
Description
Environment:
React with vite, using script to load box explorer
- Elements version:
- Box Content Explorer 23.0.0
Desktop (please complete the following information):
- OS: mac OS 15.5
- Browser: chrome
- Version: 138.0.7204.185
Steps to reproduce the problem:
- Create a folder
- Add a file inside the folder
- Go back and rename the folder
- The folder won't get renamed, need to refresh.
What is the expected behavior? (Screenshots can be helpful here)
Folder should be renamed in real time.
What went wrong? (Screenshots, console logs, or HAR files can be helpful here)
Screen.Recording.2025-08-12.at.9.44.43.PM.mov
Link to application or sample code:
import React, { useEffect } from "react";
import { useHandleBoxToken } from "~/hooks";
const BoxClass = (props) => {
const [viewChanged, setViewChanged] = React.useState(0);
useEffect(() => {
// start the Explorer
let contentExplorer = new Box.ContentExplorer();
// Show the content explorer
contentExplorer.show(props.rootFolderId, props.token, {
container: `.content-explorer___${props.entityId}`,
...(props?.isMobile && {
// [NOTE]: we need this hack because the prop documented by Box is not working
// hide some action if is mobile
canDownload: false, // hide link in drop-down menuy
onPreview: () => {
setTimeout(() => {
// wait for print icon
const controls = document.querySelector(
".bcpr-PreviewHeader-controls",
);
[...(controls?.children ?? [])].forEach(function (el) {
// get headers buttons
if (!el.classList.contains("bcpr-PreviewHeader-button-close"))
el.style.display = "none"; // remove all actions but the close button
});
}, 100);
},
}),
contentUploaderProps: {
isFolderUploadEnabled: true,
fileLimit: 500,
},
canShare: false,
logoUrl: "",
canDelete: props.canDelete === undefined ? true : props.canDelete,
canRename: props.canRename === undefined ? true : props.canRename,
canUpload: props.canUpload === undefined ? true : props.canUpload,
canCreateNewFolder:
props.canCreateNewFolder === undefined
? true
: props.canCreateNewFolder,
responseInterceptor: (response) => {
const { data } = response;
if (data.name && !data.parent?.etag && !data.parent?.sequence_id) {
data.name = props.entityName;
}
if (data.modified_by) {
data.modified_by = {};
}
if (data.parent) {
data.parent.name = props.entityName;
}
if (data?.item_collection?.entries) {
data.item_collection.entries = data.item_collection.entries.map(
(item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
},
);
}
if (data.entries) {
data.entries = data.entries.map((item) => {
if (item.modified_by) {
item.modified_by = {};
}
if (item.parent.name) {
item.parent.name = props.entityName;
}
if (item.path_collection?.entries[1]?.name) {
item.path_collection.entries[1].name = props.entityName;
}
return item;
});
}
if (data.path_collection?.entries[1]?.name) {
data.path_collection.entries[1].name = props.entityName;
}
setViewChanged((prev) => prev + 1);
return response;
},
});
if (props.onSearchActive) {
const searchElements = document.getElementsByClassName("be-search");
if (searchElements?.length) {
const inputChild = searchElements[0].firstChild;
if (inputChild)
inputChild.addEventListener("focus", props.onSearchActive);
}
}
}, [
props.rootFolderId,
props.token,
props.entityId,
props.isMobile,
props.canDelete,
props.canRename,
props.canUpload,
props.canCreateNewFolder,
props.entityName,
props.onSearchActive,
]);
useEffect(() => {
setTimeout(() => {
const breadCrumbs = document.getElementsByClassName(
"bdl-Breadcrumb-title",
);
if (breadCrumbs?.[0]) {
breadCrumbs[0].innerHTML = props.entityName;
}
}, 1);
}, [viewChanged]);
return (
<div
className={`content-explorer___${props.entityId} box-documents-container`}
></div>
);
};
export default (props) => {
const [boxScriptLoaded, setBoxScriptLoaded] = React.useState(false);
const { token, loading } = useHandleBoxToken(props?.token);
const { isMobile } = props || {};
React.useEffect(() => {
const boxScriptLoadedInterval = setInterval(() => {
if (
typeof Box != typeof undefined &&
"ContentExplorer" in (Box || {}) &&
"Preview" in (Box || {})
) {
setBoxScriptLoaded(true);
clearInterval(boxScriptLoadedInterval);
}
}, 500);
return () => {
clearInterval(boxScriptLoadedInterval);
};
}, []);
if ((!isMobile && ((!token && !props.token) || loading)) || !boxScriptLoaded)
return <p className="text-sm h-screen">Connecting to folder....</p>;
return <BoxClass key={props.token} {...props} token={props.token} />;
};