diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
index 07584492..7719f1a7 100644
--- a/__tests__/demo/demo-components/index.js
+++ b/__tests__/demo/demo-components/index.js
@@ -94,6 +94,49 @@ const global_cols = [
}
];
+const rando = (max) => Math.floor(Math.random() * max);
+
+const words = ['Paper', 'Rock', 'Scissors'];
+
+const rawData = [];
+for (let i = 0; i < 100; i++) {
+ rawData.push({ id: rando(300), word: words[i % words.length] });
+}
+
+const columns = [
+ { title: 'Id', field: 'id' },
+ { title: 'Word', field: 'word' }
+];
+
+export const DetailPanelIssuesProgrammaticallyHidingWhenOpen = () => {
+ const [data, setData] = useState(rawData);
+ const [isPanelVisible, setIsPanelVisible] = useState(true);
+
+ const components = {
+ Row: (props) =>
+ };
+
+ return (
+ <>
+
+ {
+ // return isPanelVisible ? Details Panel
: null
+ // }
+ isPanelVisible ? [{ render: () => Details panel
}] : null
+ }
+ />
+ >
+ );
+};
+
export function BulkEdit() {
const [data, setData] = useState([
{ name: 'joe', id: 1, age: 0, x: 'y', id: 0 },
diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js
index 249a9039..911a3227 100644
--- a/__tests__/demo/demo.js
+++ b/__tests__/demo/demo.js
@@ -36,7 +36,8 @@ import {
HidingColumns,
Resizable,
EditableRowDateColumnIssue,
- DataSwitcher
+ DataSwitcher,
+ DetailPanelIssuesProgrammaticallyHidingWhenOpen
} from './demo-components';
import { I1353, I1941, I122 } from './demo-components/RemoteData';
@@ -47,6 +48,9 @@ render(
Switcher
+ DetailPanelIssuesProgrammaticallyHidingWhenOpen
+
+
Basic
diff --git a/esbuild.config.js b/esbuild.config.js
index 63863dfb..3c515890 100644
--- a/esbuild.config.js
+++ b/esbuild.config.js
@@ -38,6 +38,7 @@ rimraf(path.resolve(__dirname, BUILD_DIR), async (error) => {
minify: true,
bundle: false,
outdir: `${BUILD_DIR}`,
+ format: 'cjs',
loader: {
'.js': 'jsx'
}
diff --git a/src/components/m-table-detailpanel.js b/src/components/m-table-detailpanel.js
index c5a2da66..25d2e437 100644
--- a/src/components/m-table-detailpanel.js
+++ b/src/components/m-table-detailpanel.js
@@ -5,6 +5,7 @@ function MTableDetailPanel(props) {
const [isOpen, setOpen] = React.useState(false);
const [, rerender] = React.useReducer((s) => s + 1, 0);
const renderRef = React.useRef();
+
React.useEffect(() => {
const shouldOpen = Boolean(
props.data.tableData && props.data.tableData.showDetailPanel
@@ -15,18 +16,25 @@ function MTableDetailPanel(props) {
}, [props.data.tableData.showDetailPanel]);
let renderFunction;
- if (typeof props.detailPanel === 'function') {
- renderFunction = props.detailPanel;
+
+ // See issue #282 for more on why we have to check for the existence of
+ if (!props.detailPanel) {
+ return ;
} else {
- renderFunction = props.detailPanel
- ? props.detailPanel.find(
- (panel) =>
- panel.render.toString() ===
- (props.data.tableData.showDetailPanel || '').toString()
- )
- : undefined;
- renderFunction = renderFunction ? renderFunction.render : null;
+ if (typeof props.detailPanel === 'function') {
+ renderFunction = props.detailPanel;
+ } else {
+ renderFunction = props.detailPanel
+ ? props.detailPanel.find(
+ (panel) =>
+ panel.render.toString() ===
+ (props.data.tableData.showDetailPanel || '').toString()
+ )
+ : undefined;
+ renderFunction = renderFunction ? renderFunction.render : null;
+ }
}
+
React.useEffect(() => {
if (renderFunction && isOpen) {
renderRef.current = renderFunction;