{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreifofuucvkfusw3kggymc7lq5lgor5zcfco2tssku3qfpdko53ujqi",
    "uri": "at://did:plc:lk3jfj3zq4k4wxnk474axylu/app.bsky.feed.post/3mej527oqu2l2"
  },
  "path": "/t/chatgpt-app-mobile-rendering-issue/1373875#post_1",
  "publishedAt": "2026-02-10T13:41:28.000Z",
  "site": "https://community.openai.com",
  "textContent": "Hello,\n\nThere is a bug when going from inline to fullscreen on mobile (both IOS & Android affected). It seems that all React state is lost, causing weird re-renders and breaking some apps behavior.\nAccor / TheFork featured apps are currently subject to this bug (as well as a few others).\nThis bug was introduced in last couple of weeks as far as I can tell.\n\nI managed to get a minimal reproduction example on github : valentinbeggi/state-repro\n\n\n    import { useState } from \"react\";\n    import { createRoot } from \"react-dom/client\";\n    import \"../index.css\";\n\n    const openai = () => (window as any).openai;\n\n    function StateTest() {\n      const displayMode: string = openai()?.displayMode ?? \"inline\";\n      const isFullscreen = displayMode === \"fullscreen\";\n\n      // Test A: plain React useState — lost on mobile remount\n      const [reactValue, setReactValue] = useState<string | null>(null);\n\n      // Test B: read widgetState directly from host\n      const widgetStateValue = (openai()?.widgetState?.selectedId as string) ?? null;\n\n      return (\n        <div className=\"container\">\n          <h2 className=\"title\">\n            {isFullscreen ? \"FULLSCREEN MODE\" : \"INLINE MODE\"}\n          </h2>\n\n          <div className=\"section\">\n            <h3>Test A: useState</h3>\n            <p className=\"value\">Value: <strong>{reactValue ?? \"null\"}</strong></p>\n            {!isFullscreen && (\n              <button\n                className=\"btn-primary\"\n                onClick={() => {\n                  setReactValue(\"REACT_STATE_SET\");\n                  openai()?.requestDisplayMode?.({ mode: \"fullscreen\" });\n                }}\n              >\n                Set useState + go fullscreen\n              </button>\n            )}\n          </div>\n\n          <div className=\"section\">\n            <h3>Test B: window.openai.setWidgetState</h3>\n            <p className=\"value\">Value: <strong>{widgetStateValue ?? \"null\"}</strong></p>\n            {!isFullscreen && (\n              <button\n                className=\"btn-primary\"\n                onClick={() => {\n                  openai()?.setWidgetState?.({ selectedId: \"WIDGET_STATE_SET\" });\n                  openai()?.requestDisplayMode?.({ mode: \"fullscreen\" });\n                }}\n              >\n                Set widgetState + go fullscreen\n              </button>\n            )}\n          </div>\n\n          <div className=\"section\">\n            <h3>Test C: Both at once</h3>\n            {!isFullscreen && (\n              <button\n                className=\"btn-primary\"\n                onClick={() => {\n                  setReactValue(\"REACT_BOTH\");\n                  openai()?.setWidgetState?.({ selectedId: \"WIDGET_BOTH\" });\n                  openai()?.requestDisplayMode?.({ mode: \"fullscreen\" });\n                }}\n              >\n                Set both + go fullscreen\n              </button>\n            )}\n          </div>\n\n          {isFullscreen && (\n            <button\n              className=\"btn-primary back-btn\"\n              onClick={() => openai()?.requestDisplayMode?.({ mode: \"inline\" })}\n            >\n              Back to inline\n            </button>\n          )}\n\n          <div className=\"debug\">\n            <p>displayMode: {displayMode}</p>\n            <p>reactValue (useState): {reactValue ?? \"null\"}</p>\n            <p>widgetState.selectedId: {widgetStateValue ?? \"null\"}</p>\n            <p>raw widgetState: {JSON.stringify(openai()?.widgetState)}</p>\n          </div>\n        </div>\n      );\n    }\n\n    const root = document.getElementById(\"root\");\n    if (root) {\n      createRoot(root).render(<StateTest />);\n    }\n\n\nKindly",
  "title": "ChatGPT App Mobile rendering issue"
}