Merge pull request #171 from mariohmol/fix/search-scroll-tree-mode-issue-76

fix: auto-scroll to search results in tree/view mode

Author: mariohmol

README.md

@@ -22,9 +22,11 @@ $ npm install --save jsoneditor ang-jsoneditor
 Example:
 
 ```html
-<json-editor [options]="editorOptions" [data]="data" (change)="getData($event)"></json-editor>
+<json-editor style="height: 500px;" [options]="editorOptions" [data]="data" (change)="getData($event)"></json-editor>
 ```
 
+> **Important:** `<json-editor>` requires an explicit height for tree/view/form modes to enable search scrolling and proper layout. Set it directly on the element or via a CSS class. Without a height, the editor expands to fit its content and the built-in search will not auto-scroll to results.
+
 ## Usage
 
 ### Configuration

projects/ang-jsoneditor/src/lib/jsoneditor.ts

@@ -23,6 +23,7 @@ import { IError, JsonEditorMode, JsonEditorOptions, JsonEditorTreeNode } from '.
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'json-editor',
   template: `<div [id]="id" #jsonEditorContainer></div>`,
+  styles: [`:host { display: block; } :host > div { height: 100%; }`],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

src/app/demo/demo.component.css

@@ -1 +0,0 @@
-json-editor>div {height: 100%;}

src/app/demo/demo.component.html

@@ -26,27 +26,23 @@ <h3>Force Language to {{editorOptions.language}}</h3>
 }
 
 <h3>Example with (change)</h3>
-<div style="height:600px;">
-  <json-editor [options]="editorOptions" (change)="changeLog($event)" [data]="data" #editor></json-editor>
-  <app-show [data]="showData"></app-show>
-</div>
+<json-editor style="height:600px;" [options]="editorOptions" (change)="changeLog($event)" [data]="data" #editor></json-editor>
+<app-show [data]="showData"></app-show>
 
 
 
 <h3>Using options and data variable </h3>
 
-<div style="height:300px;">
-  <form [formGroup]="form" (submit)="submit()">
-    <json-editor [options]="editorOptions2" formControlName="myinput" #editorTwo></json-editor>
-    @if (formData) {
-      <div>
-        <h4>Form submitted</h4>
-        {{ formData }}
-      </div>
-    }
-    <button>Submit</button>
-  </form>
-</div>
+<form [formGroup]="form" (submit)="submit()">
+  <json-editor style="height:300px;" [options]="editorOptions2" formControlName="myinput" #editorTwo></json-editor>
+  @if (formData) {
+    <div>
+      <h4>Form submitted</h4>
+      {{ formData }}
+    </div>
+  }
+  <button>Submit</button>
+</form>
 
 
 <h2>Multi json in a loop</h2>

src/app/demo/demo.ts

@@ -74,20 +74,48 @@ export class Demo implements OnInit {
   ngOnInit() {
     this.showData = this.data = {
       randomNumber: 2,
+      description: 'Search for "pilot" to test auto-scroll. It is near the bottom of the list.',
+      manufacturers: [
+        { id: 'toyota', country: 'Japan', founded: 1937, employees: 370870 },
+        { id: 'ford', country: 'USA', founded: 1903, employees: 186000 },
+        { id: 'bmw', country: 'Germany', founded: 1916, employees: 118909 },
+        { id: 'mercedes', country: 'Germany', founded: 1926, employees: 172425 },
+        { id: 'volkswagen', country: 'Germany', founded: 1937, employees: 672800 },
+        { id: 'hyundai', country: 'South Korea', founded: 1967, employees: 75000 },
+        { id: 'nissan', country: 'Japan', founded: 1933, employees: 133580 },
+        { id: 'chevrolet', country: 'USA', founded: 1911, employees: 155000 },
+        { id: 'subaru', country: 'Japan', founded: 1953, employees: 15000 },
+        { id: 'mazda', country: 'Japan', founded: 1920, employees: 48000 }
+      ],
       products: [
         {
           name: 'car',
-          product:
-            [
-              {
-                name: 'honda',
-                model: [
-                  { id: 'civic', name: 'civic' },
-                  { id: 'accord', name: 'accord' }, { id: 'crv', name: 'crv' },
-                  { id: 'pilot', name: 'pilot' }, { id: 'odyssey', name: 'odyssey' }
-                ]
-              }
-            ]
+          product: [
+            {
+              name: 'honda',
+              model: [
+                { id: 'civic', name: 'civic', year: 2020, price: 21550 },
+                { id: 'accord', name: 'accord', year: 2021, price: 25970 },
+                { id: 'crv', name: 'crv', year: 2022, price: 28410 },
+                { id: 'hrv', name: 'hrv', year: 2022, price: 23650 },
+                { id: 'fit', name: 'fit', year: 2020, price: 16190 },
+                { id: 'ridgeline', name: 'ridgeline', year: 2022, price: 36490 },
+                { id: 'passport', name: 'passport', year: 2022, price: 37050 },
+                { id: 'pilot', name: 'pilot', year: 2022, price: 38170 },
+                { id: 'odyssey', name: 'odyssey', year: 2022, price: 32490 }
+              ]
+            },
+            {
+              name: 'toyota',
+              model: [
+                { id: 'camry', name: 'camry', year: 2022, price: 25945 },
+                { id: 'corolla', name: 'corolla', year: 2022, price: 20075 },
+                { id: 'rav4', name: 'rav4', year: 2022, price: 27575 },
+                { id: 'highlander', name: 'highlander', year: 2022, price: 35810 },
+                { id: 'tacoma', name: 'tacoma', year: 2022, price: 27450 }
+              ]
+            }
+          ]
         }
       ]
     };