Skip to content

[BUG]TagExtension targeting div tags causes content skipping #1494

@tjkh

Description

@tjkh

Describe the bug:

I'm using flutter_html 3.0.0 and encountering an issue where using a TagExtension to target div tags causes content before the div to be skipped and not rendered.

Description of the Issue:

When I define a TagExtension that targets div tags (specifically, div tags with a certain class), the Html widget fails to render any content that appears before the targeted div in the HTML source.

HTML to reproduce the issue:

Html widget configuration:

Create a new Flutter project.
Add the flutter_html dependency to your pubspec.yaml.
Use the following minimal code to reproduce the issue:

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/dom.dart' as dom;

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@OverRide
Widget build(BuildContext context) {
String htmlContent = """

This is the passage content.


Hover over meTooltip text

""";

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('flutter_html Bug')),
    body: Center(
      child: Html(
        data: htmlContent,
        extensions: [TooltipTagExtension()],
      ),
    ),
  ),
);

}
}

class TooltipTagExtension extends TagExtension {
TooltipTagExtension()
: super(
tagsToExtend: {'div'},
builder: (context) {
final element = context.styledElement?.element;
//debugPrint("Element TagName: ${element?.localName} classes: ${element?.classes}");
if (element != null && element.classes.contains('tooltip')) {
return Text("Tooltip Placeholder"); // This line causes passage content above to disappear
}
return SizedBox.shrink();
},
);
}
Run the app. Observe that "This is the passage content." is not rendered. If you comment out extensions: [TooltipTagExtension()] the passage content appears. Also, if you change the tag from div to a custom tag (like ), the passage content appears.

Expected behavior:

Expected Behavior:

The Html widget should render all content in the HTML, regardless of the presence of a TagExtension. The TagExtension should only affect the rendering of the specific tag it's targeting.

Actual Behavior:

Content before the targeted div tag is not rendered when the TagExtension is enabled.

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

Windows 11.0
Kotlin plugin: K2 mode
GC: G1 Young Generation, G1 Concurrent GC, G1 Old Generation
Memory: 2048M
Cores: 8
Registry:
ide.experimental.ui=true
com.android.studio.ml.activeModel=com.android.studio.ml.AidaModel
Non-Bundled Plugins:
Dart (251.27623.5)
io.flutter (87.1)

Image

Stacktrace/Logcat

Additional info:

A picture of a cute animal (not mandatory but encouraged)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions