@john-jb-brock-oracle We decided to create a new issue to address the core-pack components not working properly, since we were able to identify the cause.
Whenever a Preact Signal is instantiated, regardless of where within the application (although it could strictly be within parent/child components, we haven't tested that far), it causes OJET Core-Pack components to not function properly, with either the labelHint of an input-text not moving while the user is entering data, to the checkbox not responding to action, to the dropdown not dropping down.
Here is our simple application:
App.tsx:
import { registerCustomElement } from "ojs/ojvcomponent";
import { h } from "preact";
import { useEffect } from "preact/hooks";
import Context = require("ojs/ojcontext");
import { promises as fs } from 'fs';
import { Content } from "./content/index";
import { signal } from "@preact/signals";
import { MainPage } from "main-page/main-page";
import { RightToolbar } from "right-toolbar/right-toolbar";
import { pageJsonData } from "../Data/pageJsonData";
import { configJsonData } from "../Data/configJsonData";
type Props = Readonly<{
appName?: string;
userLogin?: string;
}>;
let test = signal("test");
export const App = registerCustomElement(
"app-root",
({ appName = "App Name", userLogin = "john.hancock@oracle.com" }: Props) => {
useEffect(() => {
Context.getPageContext().getBusyContext().applicationBootstrapComplete();
}, []);
return (
<div id="appContainer" class="oj-web-applayout-page">
<div className="appMainContent">
<h1>Page 1</h1>
<MainPage />
</div>
</div>
);
}
);
Main Page component:
import { ExtendGlobalProps, registerCustomElement } from "ojs/ojvcomponent";
import { ComponentProps, ComponentType } from "preact";
import componentStrings = require("ojL10n!./resources/nls/main-page-strings");
import "css!./main-page-styles.css";
import "oj-c/input-text";
import "oj-c/select-single";
import "oj-c/checkbox";
import { CInputTextElement } from "oj-c/input-text";
import { signal } from "@preact/signals";
type Props = Readonly<{
message?: string;
}>;
/**
*
* @ojmetadata version "1.0.0"
* @ojmetadata displayName "A user friendly, translatable name of the component"
* @ojmetadata description "A translatable high-level description for the component"
*
*/
function MainPageImpl(
{ message = "Hello from main-page",
}: Props
) {
return (
<div style={{display: "flex", flexDirection: "column"}}>
<oj-c-input-text labelHint={"Test"}></oj-c-input-text>
<oj-c-select-single>Test</oj-c-select-single>
<oj-c-checkbox >Test</oj-c-checkbox>
</div>
);
}
export const MainPage: ComponentType<
ExtendGlobalProps<ComponentProps<typeof MainPageImpl>>
> = registerCustomElement(
"main-page",
MainPageImpl
);
Within the App.tsx file, we instantiate a signal. It doesn't matter if it is used or not, the signal instantiation is what seems to cause core-pack components to fail. I will also mention that this does NOT affect non-core-pack components, those function when signals are instantiated.
We are on OJET 16.1.8.
This occurs on both Chrome and Firefox browsers on Windows.
There is no zooming on the browser page, and no custom css (aside from the flexbox in the Main Page component).