• Artem Kalus 7
  • NEWBIE
  • 25 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 1
    Likes Received
  • 0
    Likes Given
  • 6
    Questions
  • 6
    Replies
I have a problem with nested iteration elements in LWC. It is duplicating a column from a parent row instead of displaying what is needed.

In order to reproduce the problem create a test Lightning App and drop testLWC component on it. When "Test" button is clicked a new row is generated in a table, however, the "Upload" button in column 3 is not supposed to be there.


testLWC.html:
<template>

    <div class="slds-box">
        <lightning-card  title="Test Component" icon-name="standard:file">
            <lightning-button label="Test" onclick={testFunction} slot="actions"></lightning-button>


            <table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered">
                <tbody>
                    <template for:each={sections} for:item="section" for:index="indexParent">
                        <tr key={section.index}>
                            <td>
                                {section.Name}
                            </td>
                            <td>
                                col 2
                            </td>
                            <td>
                                <lightning-button label="Upload" onclick={testFunction} ></lightning-button>
                            </td>
                            <td>
                                col 4
                            </td>
                        </tr>
                        <template for:each={section.rowList} for:item="row" for:index="indexChild">
                            <tr key={row.index}>
                                <td>
                                    {row.Name}
                                </td>
                                <td>
                                    child col 2
                                </td>
                                <td>
                                    child col 4
                                </td>
                                <td>
                                    child col 4
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
            
        </lightning-card>
    </div>
</template>

testLWC.js:
import { LightningElement, track } from 'lwc';

export default class TestLWC extends LightningElement {

    @track sections =   [
                        {Name:"Section 1", rowList:[]} //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}
                        ,{Name:"Section 1", rowList:[]}
                        ]; //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}]}

    connectedCallback(){
        // default logic
    }

    testFunction(){
        this.sections[0].rowList.push({Name:'Test'});
    }

}
Before Click:
Before ClickAfter Click:
After Click
I have a publicly available page through salesforce sites. It was working before our sandbox got upgraded to Spring 2020 release. In order to replicate the problem a salesforce site needs to be created. The LWC will be embedded within salesforce site VFP.

I gave the external user access to Case object (read/edit) and visibility of fields to be displayed.

I get identical issue with aura component "lightning:recordEditForm" and LWC "lightning-record-edit-form".

I could replace the lightning-record-edit-form with input fields, however, it makes things complicated with dependent picklists.


VFP:
<apex:page standardStylesheets="false" applyBodyTag="false" sidebar="false" showHeader="false">
    <apex:includeLightning />
    <div id="container"></div>
    
    <script>
    $Lightning.use("c:Site_LWC_Viewer_App", function()
    {
        $Lightning.createComponent(
            "c:testLWC",
            {'greeting':'Somnath'},
            "container",
            function(cmp)
        {
            console.log('component created');
        });
    });
    </script>
</apex:page>

AURA APP - "Site_LWC_Viewer_App":
<aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess">
</aura:application>

LWC - "testLWC":
<template>
    <lightning-record-edit-form object-api-name="Case">
        <lightning-messages></lightning-messages>

        <lightning-input-field field-name="Subject"></lightning-input-field>
        
        <lightning-button   class="slds-m-top_small"
                            type="submit"
                            label="Create new">
        </lightning-button>
    </lightning-record-edit-form>
</template>

​​​​​​​ERROR:
Error Message
I am working on a lookup field component. This component will receive a record ID attribute and when ID is changed will query for the record Name.

While working on the lookup field, I found out that the 'aura:handler name="change"...' will execute twice, if used on the child lightning component and the attribute is dynamically updateable from the parent component.

Please see the sample components below. When Neutral button is clicked, the change event is triggered twice.

CMP Screenshot with console logs:
User-added image

Parent CMP:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
         <aura:attribute name="value" type="String"/>
         <c:TestChangeEvent value="{!v.value}"/>
</aura:component>

TestChangeEvent CMP:​​​​​​​
<aura:component controller="Field_Lookup_Ctr">
 
    <aura:attribute name="value" type="String"/>
   
    <aura:handler name="change" value="{!v.value}" action="{!c.valueUpdate}"/>
   
    <lightning:button label="Neutral" title="Neutral action" onclick="{!c.updateAttribute}"/>
   
</aura:component>

TestChangeEvent  CONTROLLER:
({
   
    updateAttribute : function (component, event, helper) {
        component.set('v.value','12345');
    },
    valueUpdate : function (component, event, helper) {
        console.log('valueUpdate()');
    }
   
})

QUESTION:
Can I pause the "Change Event" or make sure it is executed only once, without too much effort?​​​​​​​
I am working on a visualforce page using SLDS and static resoueces javascript file. I have eclipse crahing every day at least once when I am working on the static resource JS file. Usually it happens after 3 hours of compiling the file. This is very annoyong and I need to refresh the whole project after it crashes as well as find the line of code I was working with. Please help. My guess is this is some network settings.


Force.com IDE Log:
WARN [2018-05-24 11:46:44,337] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 11:57:41,469] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 11:58:08,945] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:00:09,886] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:00:20,261] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:01:15,540] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:02:22,877] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:06:04,383] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:06:42,530] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:07:33,479] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:11:39,764] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:11:50,170] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:12:40,367] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [3] does not equal request count [2].
 WARN [2018-05-24 12:14:53,326] (BuilderPayload.java:filterComponentsInConflict:256) - Remote retrieve result count [59] does not equal request count [84].
 WARN [2018-05-24 12:14:53,420] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridAdminScript.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,422] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridDetailStyleCSS.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,427] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridJs.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,431] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridJs2_Backup.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,433] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridPdfMake.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,436] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridPdfMake_Backup.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,438] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/CompGridScript_Backup.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,443] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/ContractRequestScript.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,445] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/ContractRequestStyle.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,446] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/SLDS222.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,449] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/Typeahead.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,454] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/aljs.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,461] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/aljswithmomentScript.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,464] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/bootstrap.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,466] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/bootstrap_js.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,468] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/bootstrap_theme.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,483] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/datatable_zip.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,485] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/jquery_blockUI_js.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,492] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/jquery_min_js.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,495] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/pasteIcon_png.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,544] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/pdfmake.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,546] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/responsive_tables.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,548] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/responsive_tables_css.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,550] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/tableGrid_css.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,552] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/tableGrid_js.resource' - skipping duplicate
 WARN [2018-05-24 12:14:53,612] (ZipUtils.java:handleDuplicateEntryException:261) - Zip already contains 'staticresources/vfs_fonts.resource' - skipping duplicate

 
SelectList put in table or repeat visualforce elements causes all controller methods to break. No errors are shown, however, the debug statements for methods that are called from the page are not showing. No javascript errors either.

When select list is substituted with any other element the row is successfuly added to the table, but when SelectList is there and it is not blank the new row is not added as well as other butons do not work on the page.

VFP:
<apex:page controller="Test_Ctr">
    <apex:form id="theForm">
        <apex:pageBlock title="Filters">
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!newFilter}" value="New Filter" rerender="theForm"/>
                <apex:commandButton action="{!testValues}" value="Test Values" rerender="theForm"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockTable value="{!ftsWrap}" var="row">
                <apex:column> 
                    <!--apex:selectList value="{!row.fieldvar}" size="1">
                        <apex:selectOptions value="{!listOptions}"/>
                    </apex:selectList-->
                    <apex:selectList value="{!row.fieldvar}" size="1" >
                        <apex:actionSupport event="onchange" reRender="theForm"/>
                        <apex:selectOptions value="{!listOptions}"></apex:selectOptions>
                    </apex:selectList>
                </apex:column>
            </apex:pageBlockTable>
            
            
        </apex:pageBlock>
    </apex:form>
</apex:page>

CTR:
public with sharing class Test_Ctr {
    
    
    public List <filtersWrap> ftsWrap {get;set;}
    public List <SelectOption> listOptions {get;set;}
    
    
    public Test_Ctr(){
        System.debug('*****Test_Ctr()');
        
        ftsWrap = new List <filtersWrap> ();
        //filtersWrap fw = new filtersWrap();
        //ftsWrap.add(fw);
        newFilter();
        
        listOptions = objectFieldsGetter();
        System.debug('ftsWrap: '+ftsWrap);
    }
    
    
    public List<SelectOption> objectFieldsGetter() 
    {
        String selectedObject = 'Task';
        
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Schema.SObjectType ObjectSchema = schemaMap.get(selectedObject);
        Map<String, Schema.SObjectField> fieldMap = ObjectSchema.getDescribe().fields.getMap();
        List<SelectOption> fieldNames = new List<SelectOption>();
        for (String fieldName: fieldMap.keySet()) 
        {  
            fieldNames.add(new SelectOption(fieldName,fieldName));
        }
        return fieldNames;
    }
    
    
    public class filtersWrap{
        public SelectOption fieldvar {get;set;}
        //public List <SelectOption> fields {get;set;}
    }
    
    
    public void newFilter(){
        System.debug('*******newFilter()');
        filtersWrap fw = new filtersWrap();
        //fw.fields = objectFieldsGetter();
        
        System.debug('fw: '+fw);
        System.debug('ftsWrap: '+ftsWrap);
        ftsWrap.add(fw);
        
        
        System.debug('ftsWrap: '+ftsWrap);
    }
    
    public void testValues(){
        System.debug('*******testValues()');
        System.debug('ftsWrap: '+ftsWrap);
    }
    
}

User-added image
I have a visualforce page, that implemnts lightningStyleSheets="true" and has apex:tabPanel with multiple tabs. When user is in Lightnig Experience and any button is pressed on the same page, which causes a component rerendering, tabs styling changes to classic.

VF PAGE:
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" lightningStylesheets="true">
            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
                            
            <apex:pageBlock id="pbId">

                <apex:pageBlockButtons >
                    <apex:form >
                        <apex:commandButton action="{!debugFun}" rerender="pbId" value="Test" />
                    </apex:form>
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!accList}" var="a">
                    <apex:column value="{!a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

CONTROLLER:
public class PracticeCompGrid_Cont {

    public List <Account> accList {get;set;}
    
    public PracticeCompGrid_Cont (){
        accList = [SELECT Name FROM Account LIMIT 10];
    }
    
    public void debugFun(){
        System.debug('Acc: '+accList);
    }
}

BEFORE BUTTON IS PRESSED:
User-added image
AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:
User-added image



Has anyone seen this before? If yes, any solutions?
I have a visualforce page, that implemnts lightningStyleSheets="true" and has apex:tabPanel with multiple tabs. When user is in Lightnig Experience and any button is pressed on the same page, which causes a component rerendering, tabs styling changes to classic.

VF PAGE:
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" lightningStylesheets="true">
            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
                            
            <apex:pageBlock id="pbId">

                <apex:pageBlockButtons >
                    <apex:form >
                        <apex:commandButton action="{!debugFun}" rerender="pbId" value="Test" />
                    </apex:form>
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!accList}" var="a">
                    <apex:column value="{!a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

CONTROLLER:
public class PracticeCompGrid_Cont {

    public List <Account> accList {get;set;}
    
    public PracticeCompGrid_Cont (){
        accList = [SELECT Name FROM Account LIMIT 10];
    }
    
    public void debugFun(){
        System.debug('Acc: '+accList);
    }
}

BEFORE BUTTON IS PRESSED:
User-added image
AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:
User-added image



Has anyone seen this before? If yes, any solutions?
I have a problem with nested iteration elements in LWC. It is duplicating a column from a parent row instead of displaying what is needed.

In order to reproduce the problem create a test Lightning App and drop testLWC component on it. When "Test" button is clicked a new row is generated in a table, however, the "Upload" button in column 3 is not supposed to be there.


testLWC.html:
<template>

    <div class="slds-box">
        <lightning-card  title="Test Component" icon-name="standard:file">
            <lightning-button label="Test" onclick={testFunction} slot="actions"></lightning-button>


            <table class="slds-table slds-table_cell-buffer slds-table_header-hidden slds-table_bordered">
                <tbody>
                    <template for:each={sections} for:item="section" for:index="indexParent">
                        <tr key={section.index}>
                            <td>
                                {section.Name}
                            </td>
                            <td>
                                col 2
                            </td>
                            <td>
                                <lightning-button label="Upload" onclick={testFunction} ></lightning-button>
                            </td>
                            <td>
                                col 4
                            </td>
                        </tr>
                        <template for:each={section.rowList} for:item="row" for:index="indexChild">
                            <tr key={row.index}>
                                <td>
                                    {row.Name}
                                </td>
                                <td>
                                    child col 2
                                </td>
                                <td>
                                    child col 4
                                </td>
                                <td>
                                    child col 4
                                </td>
                            </tr>
                        </template>
                    </template>
                </tbody>
            </table>
            
        </lightning-card>
    </div>
</template>

testLWC.js:
import { LightningElement, track } from 'lwc';

export default class TestLWC extends LightningElement {

    @track sections =   [
                        {Name:"Section 1", rowList:[]} //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}
                        ,{Name:"Section 1", rowList:[]}
                        ]; //{Name:"Row 1"},{Name:"Row 2"},{Name:"Row 3"}]}

    connectedCallback(){
        // default logic
    }

    testFunction(){
        this.sections[0].rowList.push({Name:'Test'});
    }

}
Before Click:
Before ClickAfter Click:
After Click
I have a publicly available page through salesforce sites. It was working before our sandbox got upgraded to Spring 2020 release. In order to replicate the problem a salesforce site needs to be created. The LWC will be embedded within salesforce site VFP.

I gave the external user access to Case object (read/edit) and visibility of fields to be displayed.

I get identical issue with aura component "lightning:recordEditForm" and LWC "lightning-record-edit-form".

I could replace the lightning-record-edit-form with input fields, however, it makes things complicated with dependent picklists.


VFP:
<apex:page standardStylesheets="false" applyBodyTag="false" sidebar="false" showHeader="false">
    <apex:includeLightning />
    <div id="container"></div>
    
    <script>
    $Lightning.use("c:Site_LWC_Viewer_App", function()
    {
        $Lightning.createComponent(
            "c:testLWC",
            {'greeting':'Somnath'},
            "container",
            function(cmp)
        {
            console.log('component created');
        });
    });
    </script>
</apex:page>

AURA APP - "Site_LWC_Viewer_App":
<aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess">
</aura:application>

LWC - "testLWC":
<template>
    <lightning-record-edit-form object-api-name="Case">
        <lightning-messages></lightning-messages>

        <lightning-input-field field-name="Subject"></lightning-input-field>
        
        <lightning-button   class="slds-m-top_small"
                            type="submit"
                            label="Create new">
        </lightning-button>
    </lightning-record-edit-form>
</template>

​​​​​​​ERROR:
Error Message
SelectList put in table or repeat visualforce elements causes all controller methods to break. No errors are shown, however, the debug statements for methods that are called from the page are not showing. No javascript errors either.

When select list is substituted with any other element the row is successfuly added to the table, but when SelectList is there and it is not blank the new row is not added as well as other butons do not work on the page.

VFP:
<apex:page controller="Test_Ctr">
    <apex:form id="theForm">
        <apex:pageBlock title="Filters">
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!newFilter}" value="New Filter" rerender="theForm"/>
                <apex:commandButton action="{!testValues}" value="Test Values" rerender="theForm"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockTable value="{!ftsWrap}" var="row">
                <apex:column> 
                    <!--apex:selectList value="{!row.fieldvar}" size="1">
                        <apex:selectOptions value="{!listOptions}"/>
                    </apex:selectList-->
                    <apex:selectList value="{!row.fieldvar}" size="1" >
                        <apex:actionSupport event="onchange" reRender="theForm"/>
                        <apex:selectOptions value="{!listOptions}"></apex:selectOptions>
                    </apex:selectList>
                </apex:column>
            </apex:pageBlockTable>
            
            
        </apex:pageBlock>
    </apex:form>
</apex:page>

CTR:
public with sharing class Test_Ctr {
    
    
    public List <filtersWrap> ftsWrap {get;set;}
    public List <SelectOption> listOptions {get;set;}
    
    
    public Test_Ctr(){
        System.debug('*****Test_Ctr()');
        
        ftsWrap = new List <filtersWrap> ();
        //filtersWrap fw = new filtersWrap();
        //ftsWrap.add(fw);
        newFilter();
        
        listOptions = objectFieldsGetter();
        System.debug('ftsWrap: '+ftsWrap);
    }
    
    
    public List<SelectOption> objectFieldsGetter() 
    {
        String selectedObject = 'Task';
        
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Schema.SObjectType ObjectSchema = schemaMap.get(selectedObject);
        Map<String, Schema.SObjectField> fieldMap = ObjectSchema.getDescribe().fields.getMap();
        List<SelectOption> fieldNames = new List<SelectOption>();
        for (String fieldName: fieldMap.keySet()) 
        {  
            fieldNames.add(new SelectOption(fieldName,fieldName));
        }
        return fieldNames;
    }
    
    
    public class filtersWrap{
        public SelectOption fieldvar {get;set;}
        //public List <SelectOption> fields {get;set;}
    }
    
    
    public void newFilter(){
        System.debug('*******newFilter()');
        filtersWrap fw = new filtersWrap();
        //fw.fields = objectFieldsGetter();
        
        System.debug('fw: '+fw);
        System.debug('ftsWrap: '+ftsWrap);
        ftsWrap.add(fw);
        
        
        System.debug('ftsWrap: '+ftsWrap);
    }
    
    public void testValues(){
        System.debug('*******testValues()');
        System.debug('ftsWrap: '+ftsWrap);
    }
    
}

User-added image
I have a visualforce page, that implemnts lightningStyleSheets="true" and has apex:tabPanel with multiple tabs. When user is in Lightnig Experience and any button is pressed on the same page, which causes a component rerendering, tabs styling changes to classic.

VF PAGE:
<apex:page controller="PracticeCompGrid_Cont" showHeader="true" lightningStylesheets="true">
            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass="activeTab" inactiveTabClass="inactiveTab">
        <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
        <apex:tab label="Two" name="name2" id="tabTwo">
                            
            <apex:pageBlock id="pbId">

                <apex:pageBlockButtons >
                    <apex:form >
                        <apex:commandButton action="{!debugFun}" rerender="pbId" value="Test" />
                    </apex:form>
                </apex:pageBlockButtons>
                <apex:pageBlockTable value="{!accList}" var="a">
                    <apex:column value="{!a.Name}" />
                </apex:pageBlockTable>
            </apex:pageBlock>
        </apex:tab>
    </apex:tabPanel>
</apex:page>

CONTROLLER:
public class PracticeCompGrid_Cont {

    public List <Account> accList {get;set;}
    
    public PracticeCompGrid_Cont (){
        accList = [SELECT Name FROM Account LIMIT 10];
    }
    
    public void debugFun(){
        System.debug('Acc: '+accList);
    }
}

BEFORE BUTTON IS PRESSED:
User-added image
AFTER BUTTON IS PRESSED AND RERENDER HAPPENED:
User-added image



Has anyone seen this before? If yes, any solutions?
I was solving this challenge and my VF code is:

<apex:page standardController="Account" recordSetVar="Accounts" >
    <apex:pageblock>
        <apex:repeat var="a" value="{!Accounts}" rendered="true"  id="account_list">
            <li>
                <apex:outputLink value="https://ap1.salesforce.com/{!a.ID}" >
                    <apex:outputText value="{!a.Name}"/>
                </apex:outputLink>
            </li>
        </apex:repeat>
    </apex:pageblock>
</apex:page>

I am getting the list of accounts as required and on clicking on any of the accouts, it redirects to that accounts detail page.
Still I am getting following error from trailhead:

"The page does not bind to the record ID value (in order to link to the record detail page)"